CSS Animations

CSS animations let you smoothly transition styles over time using @keyframes and the animation properties. They run on the compositor thread when animating transform and opacity, which is great for performance.

1) Basic @keyframes & Shorthand


@keyframes slideRight {
  from { transform: translateX(0); }
  to   { transform: translateX(160px); }
}

.box {
  animation: slideRight 1.2s ease-in-out infinite alternate;
}
Go

2) Easing Functions


.a { animation: move 1.4s linear infinite alternate; }
.b { animation: move 1.4s ease infinite alternate; }
.c { animation: move 1.4s ease-in infinite alternate; }
.d { animation: move 1.4s ease-out infinite alternate; }
.e { animation: move 1.4s ease-in-out infinite alternate; }
linear
ease
in
out
in-out

3) Delay, Iteration, Direction, Fill Mode


.pop-once{
  animation-name: pop;
  animation-duration: 900ms;
  animation-delay: .3s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
}
Pop

With fill-mode: both, the element keeps the animated styles before/after running.

4) Pause/Resume with animation-play-state


.spin   { animation: spin 1.2s linear infinite; }
.paused { animation-play-state: paused; }
⟳

Hover the spinner to pause (CSS). Click the button to toggle paused class (JS below).

5) Multiple Animations


.combo{
  animation: pulse 1.6s ease-out infinite, updown 1.2s ease-in-out infinite;
}
Combo

6) Discrete Frames with steps()


.steps-demo { animation: stepper 1s steps(5) infinite; }
steps(5)

Great for sprite sheets or counters that “tick”.

Performance & Accessibility:

  • Animate transform and opacity for smoother, GPU-accelerated animations.
  • Avoid animating layout-affecting properties (like width, left, top) where possible.
  • Respect user preference: stop non-essential motion with @media (prefers-reduced-motion: reduce).
  • Provide clear affordances (e.g., pause on hover or a “Reduce motion” toggle).