@keyframes fadeIn { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } .animated { animation: fadeIn 1s ease 0s 1 normal forwards; }

@keyframes syntax

CSS animations are defined with an @keyframes rule that describes the animation states:

@keyframes slide-in {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

You can use from / to (equivalent to 0% / 100%) or any percentage values to define intermediate states.

animation shorthand

The animation shorthand property packs all animation settings into one declaration:

animation: name duration timing-function delay iteration-count direction fill-mode;

Sub-property	Values	Description
`duration`	`0.3s`, `1500ms`	How long one cycle takes.
`timing-function`	ease, linear, ease-in-out, cubic-bezier()	Speed curve of the animation.
`delay`	`0.2s`, `-500ms`	Wait before starting. Negative values start mid-animation.
`iteration-count`	`1`, `infinite`, `2.5`	How many times to run.
`direction`	normal, reverse, alternate, alternate-reverse	Whether to play forward, backward, or alternating.
`fill-mode`	none, forwards, backwards, both	What state to hold before/after the animation runs.

Timing function guide

ease: starts moderately fast, decelerates - good default for most UI transitions.
linear: constant speed - ideal for spinning loaders and continuous motion.
ease-in: starts slow, ends fast - good for elements leaving the screen.
ease-out: starts fast, ends slow - natural for elements entering the screen.
ease-in-out: symmetric slow-fast-slow - polished feel for back-and-forth transitions.

prefers-reduced-motion

Users can enable a system-level preference for reduced motion (in OS accessibility settings). Respect this with a CSS media query to disable or simplify animations:

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

This is a critical accessibility consideration. For users with vestibular disorders, motion sickness, or ADHD, excessive animation can cause physical discomfort or cognitive overload. Always test your animations with this setting enabled.

GPU compositing

For maximum performance, only animate properties that are GPU-composited: transform (translate, scale, rotate) and opacity. These bypass layout and paint stages entirely, rendering on the GPU at 60fps. Avoid animating width, height, top, left, margin, or padding, as these trigger expensive layout reflows that can cause jank on lower-end devices.

FLIP technique

The FLIP technique (First-Last-Invert-Play) is a pattern for animating layout changes smoothly using transforms. The steps:

First: Record the element's initial position/size.
Last: Apply the layout change (e.g., reorder DOM) and record the final state.
Invert: Use transform to move the element back to its original visual position.
Play: Transition transform to zero, animating to the new layout.

This allows you to animate changes that would normally require layout recalculation (like reordering grid items) by faking the motion with GPU-accelerated transforms.