CSS Keyframe Animation: Complete Guide
CSS keyframe animations let you create smooth, multi-step animations without JavaScript. Here's what you need to know:
- Use
@keyframes
to define animation stages - Control timing, duration, and behavior with animation properties
- Widely supported in modern browsers
- Best for UI animations and simple effects
Key benefits: • Hardware-accelerated performance • Easier to implement than JavaScript • Keeps SVG files smaller
Quick tips:
- Animate
transform
andopacity
for smoothness - Use
will-change
to hint at changes - Avoid animating too many elements at once
- Add reduced motion support for accessibility
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
.element {
animation: slide 2s ease infinite;
}
This guide covers everything from basic concepts to advanced techniques for creating engaging CSS animations.
Related video from YouTube
How keyframe animations work
Keyframe animations in CSS let you create complex, multi-step animations. They work by defining styles at various points in an animation sequence.
Keyframe basics
The core is the @keyframes
rule. It specifies the animation code:
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-50px); }
100% { transform: translateY(0); }
}
This defines a "bounce" animation with three stages. To apply it:
.bouncing-element {
animation: bounce 2s infinite;
}
Keyframes vs. transitions
Feature | Keyframes | Transitions |
---|---|---|
Complexity | Multiple steps | Two states |
Control | Fine-grained | Limited |
Trigger | Can auto-run | Needs trigger |
Repetition | Can loop | Once per trigger |
Keyframes are better for complex effects. For example, a spinner:
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}
Writing keyframe animations
Using @keyframes
The @keyframes
rule defines animation stages:
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-50px); }
100% { transform: translateY(0); }
}
Setting animation stages
Use percentages or keywords:
@keyframes color-change {
0% { background-color: red; }
33% { background-color: blue; }
66% { background-color: green; }
100% { background-color: red; }
}
Naming your animations
Choose clear names:
.element {
animation: bounce 2s infinite;
}
You can animate multiple properties:
@keyframes grow-and-spin {
0% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
50% {
transform: scale(1.5) rotate(180deg);
opacity: 0.5;
}
100% {
transform: scale(1) rotate(360deg);
opacity: 1;
}
}
Key animation properties
1. animation-name
.element {
animation-name: bounce;
}
2. animation-duration
.element {
animation-duration: 2s;
}
3. animation-timing-function
.element {
animation-timing-function: ease-in-out;
}
4. animation-delay
.element {
animation-delay: 0.5s;
}
5. animation-iteration-count
.element {
animation-iteration-count: 3;
}
6. animation-direction
7. animation-fill-mode
8. animation-play-state
.element {
animation-play-state: paused;
}
9. animation (shorthand)
.element {
animation: bounce 2s ease-in-out 0.5s infinite alternate;
}
Making simple animations
Moving elements
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(200px); }
}
.sliding-element {
animation: slide 2s ease infinite;
}
Changing colors and opacity
@keyframes fade {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
.fading-element {
animation: fade 3s linear infinite;
}
Scaling and rotating
@keyframes grow-and-spin {
0% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.5) rotate(180deg); }
100% { transform: scale(1) rotate(360deg); }
}
.growing-spinning-element {
animation: grow-and-spin 4s ease-in-out infinite;
}
Combine multiple animations:
.multi-animated {
animation:
slide 2s ease infinite,
fade 3s linear infinite,
grow-and-spin 4s ease-in-out infinite;
}
Complex animation techniques
Multi-step animations
@keyframes progress-bar {
0% { transform: scaleX(0); }
17% { transform: scaleX(.18); }
24% { transform: scaleX(.4); }
46% { transform: scaleX(.81); }
100% { transform: scaleX(1); }
}
.progress {
animation: progress-bar 3s ease-in-out;
}
Mixing different properties
@keyframes complex-animation {
0% {
transform: translateX(0) scale(1);
background-color: red;
opacity: 0.5;
}
50% {
transform: translateX(100px) scale(1.5);
background-color: blue;
opacity: 0.8;
}
100% {
transform: translateX(200px) scale(1);
background-color: green;
opacity: 1;
}
}
.animated-element {
animation: complex-animation 4s ease-in-out infinite;
}
Custom timing with cubic-bezier
.custom-timing {
animation: slide-in 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}
@keyframes slide-in {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
sbb-itb-b5a6996
Making animations run faster
Smooth animation tips
- Use
transform
andopacity
- Avoid layout-triggering properties
- Use
requestAnimationFrame()
- Delay animations on page load
Using GPU acceleration
- Use
will-change
- Force GPU rendering with
translateZ(0)
- Be cautious with memory usage
Browser support and backups
Browser compatibility
Most modern browsers support CSS animations. For older browsers, use vendor prefixes:
@-webkit-keyframes myAnimation {
/* Keyframes */
}
@keyframes myAnimation {
/* Keyframes */
}
.animated-element {
-webkit-animation: myAnimation 1s ease-in-out;
animation: myAnimation 1s ease-in-out;
}
Fallback options
- Provide static content
- Use JavaScript alternatives
- Use feature detection
- Design for graceful degradation
Fixing animation problems
Common issues and fixes
- Check
@keyframes
andanimation-name
- Set non-zero
animation-duration
- Use
animation-fill-mode: forwards
- Stick to
transform
andopacity
Tools for checking animations
Use browser developer tools to debug animations.
Adding JavaScript to animations
Controlling animations with code
// Start
element.classList.add('animate');
// Pause/Resume
element.style.animationPlayState = 'paused';
element.style.animationPlayState = 'running';
// Change speed
element.style.animationDuration = '5s';
Responding to animation events
element.addEventListener('animationstart', () => {
console.log('Animation started');
});
element.addEventListener('animationend', () => {
console.log('Animation finished');
});
Practical uses of keyframe animations
- Show state changes
- Provide feedback
- Guide attention
- Create spatial awareness
Tips for better animations
- Group related animations
- Use descriptive names
- Comment complex animations
- Create reusable animations
- Consider accessibility
Remember to test your animations across different browsers and devices for the best user experience.