Why Use @keyframes Animations?

• Multi-step animations: Unlike CSS transitions that only animate between two states, @keyframes allows you to define multiple stages (0%, 50%, 100%, etc.), making effects like bouncing, shaking, or pulsing possible.
• Automatic looping: With animation-iteration-count: infinite;, animations can run endlessly without JavaScript.
• Playback options: Control playback with normal, reverse, or alternate directions, and set forwards or both fill modes to control end states.
• Performance friendly: Keyframe animations are GPU-optimized and run smoothly, even on mobile devices, without heavy JavaScript.
• Reusable & composable: Define an animation once and reuse it across multiple elements, or even combine several animations together.
• Cleaner code: Keeps animation logic in CSS, making it easier for designers and developers to work together without extra JS complexity.

CSS Animation Shorthand Syntax

The CSS animation property is a shorthand that lets you define all animation options in one line.

General form:

Parameters Explained:

• animation-name → the name of the @keyframes you want to use (e.g., fadeIn).
• animation-duration → how long the animation runs (e.g., 2s, 500ms).
• animation-timing-function → the speed curve or easing (e.g., ease, linear, ease-in-out).
• animation-delay → how long to wait before starting (e.g., 0s, 1s).
• animation-iteration-count → how many times it runs (e.g., 1, infinite).
• animation-direction → the playback direction (e.g., normal, reverse, alternate).
• animation-fill-mode → defines how the element styles are applied before and after animation (e.g., forwards, backwards, both).

Example with real values: