Define Keyframes in CSS
From the CSS Animations cheat sheet · Keyframe Animations · verified Jul 2026
Define Keyframes
Create named animation sequences with multiple steps
css
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}💡 Use percentages or from/to for keyframe stops
⚡ Keyframes can animate any CSS property
📌 Define multiple keyframes for complex animations
✅ Reuse keyframes across multiple elements
Continue with CSS Animations
Save the full cheat sheet or work through every related task.