Animations
demo.html
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Animations Demo</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.section {
margin-bottom: 40px;
}
.box {
width: 100px;
height: 100px;
background: lightblue;
border: 2px solid black;
margin: 10px;
display: inline-block;
}
/* TRANSFORM */
.transform:hover {
transform: rotate(20deg) scale(1.2);
}
/* TRANSITION */
.transition {
transition: all 0.5s ease;
}
.transition:hover {
background: blue;
color: white;
transform: translateY(-10px);
}
/* KEYFRAME */
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-40px); }
100% { transform: translateY(0); }
}
.animate {
animation: bounce 1s infinite;
}
</style>
</head>
<body>
<h1>CSS Animations</h1>
<div class="section">
<h2>Transforms (Hover)</h2>
<div class="box transform"></div>
</div>
<div class="section">
<h2>Transitions</h2>
<div class="box transition"></div>
</div>
<div class="section">
<h2>Keyframe Animation</h2>
<div class="box animate"></div>
</div>
</body>
</html>
demo.html
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Animations Demo</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.section {
margin-bottom: 40px;
}
.box {
width: 100px;
height: 100px;
background: lightblue;
border: 2px solid black;
margin: 10px;
display: inline-block;
}
/* TRANSFORM */
.transform:hover {
transform: rotate(20deg) scale(1.2);
}
/* TRANSITION */
.transition {
transition: all 0.5s ease;
}
.transition:hover {
background: blue;
color: white;
transform: translateY(-10px);
}
/* KEYFRAME */
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-40px); }
100% { transform: translateY(0); }
}
.animate {
animation: bounce 1s infinite;
}
</style>
</head>
<body>
<h1>CSS Animations</h1>
<div class="section">
<h2>Transforms (Hover)</h2>
<div class="box transform"></div>
</div>
<div class="section">
<h2>Transitions</h2>
<div class="box transition"></div>
</div>
<div class="section">
<h2>Keyframe Animation</h2>
<div class="box animate"></div>
</div>
</body>
</html>