@keyframes Syntax and Animation Property

CSS animations allow multi-step property changes over time using @keyframes. Unlike transitions, animations start automatically or on class addition and support complex sequences.

Define animation steps using percentages (0% to 100%) or from/to keywords:

Apply an animation to an element using the animation shorthand or its sub-properties:

References the @keyframes rule by name:

Sets how long one cycle of the animation takes:

Use percentage keyframes for complex multi-step animations:

Each keyframe step can animate multiple properties simultaneously:

The timing function can be set per keyframe step, controlling easing between individual waypoints rather than the whole animation.

Apply multiple animations to one element using comma-separated values:

Pause and resume animations dynamically:

Choose wisely:

• Transition: two states, triggered by state change, simple
• Animation: multi-step, self-starting, looping, more control

Define animation steps with @keyframes using from/to or percentage waypoints. Apply with the animation shorthand specifying name, duration, timing, and fill-mode. Multiple animations are comma-separated. Use transitions for simple two-state changes and animations for complex sequences.