Animation Properties in CSS

From the CSS Animations cheat sheet · Keyframe Animations · verified Jul 2026

Animation Properties

Control keyframe animations with timing, duration, and iteration

css
animation: name duration timing-function delay iteration-count direction;
animation: slide 2s ease-in-out infinite;
animation: bounce 1s ease infinite alternate;
animation-play-state: paused | running;
💡 animation shorthand combines all properties
⚡ animation-fill-mode controls start/end states
📌 Use animation-play-state to pause animations
🎯 infinite iteration for continuous animations

Continue with CSS Animations

Save the full cheat sheet or work through every related task.

More CSS tasks

Back to the full CSS Animations cheat sheet