CSS Animation
What is CSS Animation?
CSS Animation allows HTML elements to change their appearance or position automatically over time without using JavaScript. Animations are created using the @keyframes rule and the animation property. They are commonly used to create loading effects, moving objects, fading elements, buttons, banners, and interactive user interfaces.
Why Use CSS Animation?
CSS animations make webpages more attractive and interactive. They provide smooth visual effects, improve user experience, and are optimized by modern browsers for better performance.
Important Animation Properties
Step 1: Create Your First Animation
Define an animation using @keyframes and apply it to an HTML element.
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width:100px;
height:100px;
background:#007BFF;
animation:moveBox 3s;
}
@keyframes moveBox{
from{
transform:translateX(0);
}
to{
transform:translateX(200px);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>Step 2: Change Background Color
Animations can also change colors smoothly over time.
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width:120px;
height:120px;
animation:colors 4s infinite;
}
@keyframes colors{
0%{background:red;}
50%{background:yellow;}
100%{background:green;}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>Step 3: Rotate an Element
Use animations to rotate an element continuously.
<!DOCTYPE html>
<html>
<head>
<style>
.circle{
width:100px;
height:100px;
background:#ff6600;
border-radius:50%;
animation:spin 2s linear infinite;
}
@keyframes spin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>Step 4: Fade In an Element
The opacity property creates smooth fade-in effects.
<!DOCTYPE html>
<html>
<head>
<style>
h2{
animation:fade 3s;
}
@keyframes fade{
from{
opacity:0;
}
to{
opacity:1;
}
}
</style>
</head>
<body>
<h2>
Welcome to CSS Animation
</h2>
</body>
</html>Step 5: Create a Hover Animation
Combine transitions and transforms to animate elements when the user hovers over them.
<!DOCTYPE html>
<html>
<head>
<style>
button{
padding:12px 25px;
background:#007BFF;
color:white;
border:none;
transition:.3s;
cursor:pointer;
}
button:hover{
transform:scale(1.2);
background:#0056b3;
}
</style>
</head>
<body>
<button>
Hover Me
</button>
</body>
</html>Complete CSS Animation Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family:Arial;
text-align:center;
margin-top:60px;
}
.box{
width:120px;
height:120px;
margin:auto;
background:linear-gradient(#00c6ff,#0072ff);
animation:bounce 2s infinite alternate;
}
@keyframes bounce{
from{
transform:translateY(0);
}
to{
transform:translateY(-100px);
}
}
</style>
</head>
<body>
<h2>
Bouncing Box
</h2>
<div class="box"></div>
</body>
</html>Advantages of CSS Animation
Best Practices
- Use animations to improve the user experience, not distract users.
- Keep animation durations smooth and natural.
- Use @keyframes with meaningful names.
- Avoid running too many animations at the same time.
- Combine animations with transforms for better performance.
- Use infinite animations only when necessary.
- Test animations on desktop and mobile devices.
- Keep animated content accessible and easy to read.
Web Resources on CSS Animation
1. MDN Web Docs : Using CSS animations
2. Animate.style : Just add water CSS animations
3. MDN Web Docs : animation CSS property
4. Web.dev : Animations
🧪 Test Your CSS Code
Edit the CSS code on the left and click “Run Code” to see the result on the right.
Click “Run Code” to see the result here.