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

More CSS tasks

Animation Properties
Common Animations

Back to the full CSS Animations cheat sheet