All animation and transition properties — keyframes, timing functions, easing, transforms, and patterns
CSS Animations Reference is a searchable cheatsheet covering all CSS animation properties and animation-related concepts: @keyframes syntax, animation shorthand properties (name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state), timing functions (ease, linear, cubic-bezier, steps), and the transform property for animatable values. It includes live interactive examples for each animation property.
CSS animations use @keyframes rules to define what happens at each step of the animation, and the animation property to apply the animation to an element. The @keyframes rule names a sequence of styles using 'from', 'to', or percentage values (0%, 50%, 100%). The element's animation property connects it to the @keyframes by name. Multiple animations can be applied to the same element, comma-separated.
Performance is critical for animations: only animate transform and opacity properties — these can be GPU-composited and never cause layout or paint. Animating width, height, top, left, margin, or padding causes layout recalculation every frame, dropping frame rates. The will-change: transform property promotes an element to its own GPU layer before the animation starts, eliminating paint jank. The prefers-reduced-motion media query lets you disable animations for users who have requested reduced motion in system settings.
Fade in animation
Result: @keyframes fadeIn {from{opacity:0}to{opacity:1}} .el{animation:fadeIn 0.3s ease-in}
Infinite pulse
Result: @keyframes pulse {0%,100%{transform:scale(1)}50%{transform:scale(1.05)}} animation:pulse 2s infinite
Loading spinner
Result: @keyframes spin{to{transform:rotate(360deg)}} animation:spin 1s linear infinite
Which properties are safe to animate for performance?
Only transform (translate, rotate, scale, skew) and opacity are composited by the GPU and don't trigger layout or paint. Every other property (color, width, height, padding, margin, top, left, background) causes layout recalculation or repaint every frame. The rule: if you need to move an element, use transform: translate() not left/top. If you need to resize, consider using transform: scale() instead of changing width/height.
What is will-change and when should I use it?
will-change hints to the browser that an element will be animated, allowing it to promote the element to its own compositing layer before animation starts. This eliminates the initial layer-creation jank. Usage: will-change: transform on elements that will animate via transform. Caution: don't apply will-change to many elements — each compositing layer uses GPU memory. Apply it only to elements that actually animate, and remove it (will-change: auto) after the animation ends.
What is the difference between CSS transitions and CSS animations?
Transitions: defined by a state change (hover, focus, class addition) — they have a start and end state with the browser interpolating between them. Good for: hover effects, toggle state changes, UI interactions. Animations: defined by @keyframes with explicit control over intermediate states, looping, delays, and direction. Good for: loading indicators, attention animations, complex multi-step sequences. Prefer transitions for interaction feedback; use animations for autonomous, continuous motion.
What is animation-fill-mode?
animation-fill-mode controls the element's styles before and after the animation: none (default, element returns to original styles), forwards (element keeps final keyframe styles after animation ends), backwards (element applies initial keyframe styles during animation-delay), both (combines forwards and backwards). Use forwards when an animation should leave the element in its final animated state.
What is prefers-reduced-motion?
@media (prefers-reduced-motion: reduce) matches users who've enabled 'Reduce Motion' in their OS settings (common for users with vestibular disorders, epilepsy, or motion sickness). Inside this media query, replace or disable animations: *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }. This ensures animations don't cause discomfort for sensitive users while preserving functional transitions for everyone.