CSS Animations: @keyframes, Timing Functions And Animation Properties Explained (2026-27)

✅ What Are CSS Animations?

CSS Animations let you animate an element through multiple style states over time, using @keyframes rules, without requiring any JavaScript. They can run automatically on page load, loop infinitely, reverse direction, and pause — making them the right tool for loading spinners, entrance effects, attention pulses, and motion that needs more than a simple A-to-B transition.

✅ @keyframes – Defining Animation Steps

@keyframes is a CSS at-rule where you define each step of an animation by name. Use from and to for a simple two-step animation, or percentage values (0%, 25%, 50%, 100%) to build multi-step sequences.

✅ animation-name And animation-duration

These two properties are the minimum needed to run any animation. animation-name links the element to a @keyframes rule by its exact name; animation-duration sets how long one full cycle takes — in seconds (s) or milliseconds (ms).

✅ animation-timing-function – Speed Curves

animation-timing-function controls how the animation accelerates and decelerates across its duration. The five keyword values cover the most common motion feels; cubic-bezier() gives you precise, custom control over any speed curve.

✅ animation-delay – When the Animation Starts

animation-delay holds the element in its pre-animation (or first-keyframe, with fill-mode: backwards) state for a set time before the animation begins. Negative values start the animation as if it's already been running for that duration.

✅ animation-iteration-count – Loops & infinite

animation-iteration-count sets how many times the animation plays. A number plays it that many times and stops; infinite loops it forever — the standard value for spinners, pulses, and breathing effects.

✅ animation-direction – normal, reverse, alternate

animation-direction controls which way through the @keyframes the animation runs each cycle: normal (start → end), reverse (end → start), alternate (start → end then end → start), or alternate-reverse.

✅ animation-fill-mode – forwards, backwards, both

animation-fill-mode determines what styles the element holds outside the animation's active time — before it starts (during a delay) and after it finishes. Without this, elements snap back to their original styles the moment the animation ends.

✅ animation-play-state – Running & Paused

animation-play-state toggles an animation between running and paused — the animation freezes exactly where it is and resumes from the same point. This is commonly triggered via CSS :hover or a JavaScript class toggle.

✅ The animation Shorthand

The animation shorthand combines all eight animation properties into one compact declaration. The order is: name duration timing-function delay iteration-count direction fill-mode play-state.

/* Longhand */
.box {
  animation-name: slidein;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

/* Shorthand — identical result */
.box {
  animation: slidein 0.6s ease-out 0.2s 1 normal forwards running;
}

/* Most common everyday form (omitting defaults) */
.box {
  animation: slidein 0.6s ease-out forwards;
}

✅ Real-World Animation Patterns

Here are the six most commonly used CSS animation patterns in production UI — all running live:

✅ Animation Properties – Reference Table

✅ Best Practices

✔️ 1) Animate only transform and opacity for Maximum Performance
Browsers can run transform and opacity animations on the GPU compositor thread, giving smooth 60fps with near-zero CPU cost. Animating layout-affecting properties like width, height, top, or margin forces full layout recalculations on every frame and can cause jank.

✔️ 2) Always Add animation-fill-mode: forwards on One-Time Entrance Animations
Without it, the element snaps back to its pre-animation state the moment the animation finishes — which is almost never what you want for a fade-in or slide-in effect.

✔️ 3) Respect prefers-reduced-motion
Wrap all non-essential animations in a @media (prefers-reduced-motion: reduce) block and disable or tone them down — motion can cause discomfort for users with vestibular disorders.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

✔️ 4) Use animation-delay for Staggered Entrance Effects
Incrementing delay values across list items (0s, 0.1s, 0.2s…) creates a cascade that feels polished and natural with zero extra @keyframes or JavaScript.

✔️ 5) Keep animation-duration Under 600ms for UI Feedback
Animations faster than 600ms feel responsive; longer than 1–2 seconds feel sluggish for interactive UI. Save longer durations for background decorative animations where the user isn't waiting.

✅ Common Mistakes to Avoid

✅ Complete Live Example

A notification toast that slides in from the right, pauses to be read, then fades out — all with CSS animations only:

✅ Try It Yourself – Interactive Editor

Edit the HTML and CSS below to experiment with CSS animations. Try changing @keyframes steps, the timing function, iteration count, or fill-mode. The preview updates automatically.

✅ 🎨 Interactive Animation Builder

Pick a motion type, then dial in duration, timing function, delay, iteration count, direction, and fill-mode to generate ready-to-use CSS animation code.

✅ Practice – Yes / No Quiz

✅ Frequently Asked Questions (FAQ)