CSS animation is the bridge between static documents and living interfaces. A button that subtly lifts on hover, a card that flips to reveal details, a loading spinner that pulses with rhythm — these micro-interactions transform functional pages into delightful experiences. Yet the CSS animation specification spans dozens of properties across transitions, transforms, keyframes, and timing functions, each with its own syntax quirks and performance implications.
Our free interactive CSS Animation Properties Cheat Sheet consolidates every animation-related property into a searchable, filterable reference with live code examples. Whether you need a quick reminder of animation-fill-mode values, a cubic-bezier curve for a custom easing, or a complete pulse animation you can copy and paste, the cheat sheet delivers instant answers. Built with the Crystal Codex aesthetic — deep midnight navy, holographic constellation effects, and prismatic glass cards — it turns reference lookup into visual exploration. Everything runs entirely in your browser with no server interaction, no signup, and no data collection. Access it now at https://devtoolkit-dls.pages.dev/css-animation-properties-cheat-sheet/.
Why CSS Animation Deserves a Dedicated Reference
The CSS animation module is deceptively broad. At its core are three subsystems: transitions for simple state changes, animations for complex multi-step sequences, and transforms for performant geometric manipulation. Each subsystem has its own shorthand syntax, timing vocabulary, and browser optimization path. A developer might know how to write a basic hover transition yet struggle with animation-direction: alternate-reverse, or understand transform: translateX() but be unsure when to use perspective versus transform-origin.
A unified cheat sheet solves three problems. First, it surfaces the full vocabulary of animation in one place, preventing the "I did not know that property existed" syndrome. Second, it provides copyable code examples for every property and common pattern, eliminating the need to reconstruct syntax from memory. Third, it includes performance guidance — which properties to animate, which to avoid, and how to use will-change responsibly — ensuring your animations run at 60fps instead of janking the main thread.
Animation Properties — The Complete Breakdown
The CSS animation properties control how @keyframes sequences execute. Understanding each property individually is essential before using the animation shorthand, which compresses multiple declarations into a single line.
animation-name
The animation-name property binds an element to a specific @keyframes rule. Multiple names can be specified, separated by commas, allowing simultaneous animations on different properties.
{`.spinner {
animation-name: rotate;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}`}animation-duration
Defines how long one animation cycle takes. Values are specified in seconds (s) or milliseconds (ms). The default is 0s, which means the animation does not run.
{`.fade-in {
animation-name: fadeIn;
animation-duration: 0.5s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}`}animation-delay
Specifies when the animation starts relative to when it is applied. A positive delay waits before starting; a negative delay jumps into the animation sequence as if it had already been running.
{`.staggered-item {
animation-name: slideUp;
animation-duration: 0.4s;
animation-delay: 0.2s;
}
/* Negative delay: start 1s into the 3s animation */
.pre-warmed {
animation-name: complexSequence;
animation-duration: 3s;
animation-delay: -1s;
}`}animation-iteration-count
Controls how many times the animation repeats. Use a number for finite repeats or infinite for endless loops.
{`.pulse {
animation-name: pulse;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.repeat-three {
animation-name: bounce;
animation-duration: 0.6s;
animation-iteration-count: 3;
}`}animation-direction
Determines whether the animation runs normally, reverses, alternates, or alternates in reverse. This is essential for smooth back-and-forth effects.
{`.swing {
animation-name: swing;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
/* Values: normal | reverse | alternate | alternate-reverse */`}animation-fill-mode
Defines how styles apply before and after the animation runs. This is critical for preventing elements from snapping back to their original state.
{`.slide-in {
animation-name: slideIn;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
/* forwards: keep final keyframe styles */
/* backwards: apply first keyframe before start */
/* both: combine forwards and backwards */`}animation-play-state
Controls whether the animation is running or paused. Commonly toggled via JavaScript for scroll-triggered or interaction-driven animations.
{`.paused-on-hover:hover {
animation-play-state: paused;
}
/* JavaScript control */
// element.style.animationPlayState = 'paused';`}animation-timing-function
Defines the acceleration curve of the animation. Beyond the named keywords, you can specify cubic-bezier() for custom curves or steps() for frame-based animation.
{`.ease-custom {
animation-name: move;
animation-duration: 2s;
animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.frame-animation {
animation-timing-function: steps(8, end);
}`}animation Shorthand
The animation shorthand combines all properties except animation-play-state in a single declaration. Order matters: duration must precede delay, and name must be last to avoid ambiguity.
{`.complete-animation {
animation: slideIn 0.5s ease-out 0.2s 1 forwards;
/* name duration timing-function delay iteration-count fill-mode */
}`}Transition Properties — Smooth State Changes
CSS transitions animate property changes between two states. Unlike animations, they do not use @keyframes and are typically triggered by pseudo-classes or class changes.
transition-property
Specifies which CSS properties should animate. Use all to transition every animatable property, or list specific properties for finer control.
{`.button {
background-color: #3b82f6;
transition-property: background-color, transform;
transition-duration: 0.3s;
}
.button:hover {
background-color: #2563eb;
transform: translateY(-2px);
}`}transition-duration
How long the transition takes. Different properties can have different durations when multiple values are specified.
{`.card {
transition-property: opacity, transform;
transition-duration: 0.2s, 0.4s;
/* opacity transitions in 0.2s, transform in 0.4s */
}`}transition-timing-function
Same concept as animation-timing-function but for transitions. Controls the rate of change during the transition.
{`.smooth-bounce {
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}`}transition-delay
Waits before starting the transition after the triggering event. Useful for staggered hover effects.
{`.menu-item {
transition-property: opacity, transform;
transition-duration: 0.3s;
transition-delay: 0s, 0.1s;
}`}transition Shorthand
{`.link {
transition: color 0.2s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}`}Animation vs Transition — When to Use Which
Use transitions for simple state changes triggered by user interaction: hover effects, focus rings, toggle switches. They require less code and are easier to maintain for two-state scenarios. Use animations for multi-step sequences, infinite loops, entrance effects on page load, or any scenario requiring more than a start and end state. Animations offer precise timing control, iteration, direction reversal, and fill-mode behavior that transitions cannot express.
Transform 2D and 3D — The Performance Powerhouse
The transform property is the most performant way to animate visual changes because browsers composite transforms on the GPU, avoiding expensive layout and paint operations.
2D Transforms
translate(x, y) moves an element without affecting document flow. translateX() and translateY() move along a single axis.
{`.slide-right {
transform: translateX(100px);
}
.slide-diagonal {
transform: translate(50px, -20px);
}`}scale(x, y) resizes an element. A single value scales uniformly.
{`.zoom-in {
transform: scale(1.2);
}
.stretch {
transform: scale(1.5, 0.8);
}`}rotate(angle) rotates around the transform origin. Positive values rotate clockwise.
{`.tilt {
transform: rotate(15deg);
}
.spin {
transform: rotate(360deg);
}`}skew(x-angle, y-angle) distorts along each axis.
{`.slant {
transform: skewX(-10deg);
}`}matrix(a, b, c, d, e, f) combines all 2D transforms into a single 6-value matrix. Rarely written by hand but useful for performance-critical animations.
3D Transforms
translate3d(x, y, z) enables hardware acceleration even when z is zero because it promotes the element to its own compositor layer.
{`.layer-promoted {
transform: translate3d(0, 0, 0);
/* Forces GPU layer even with no visible movement */
}`}rotate3d(x, y, z, angle) rotates around an arbitrary axis in 3D space.
{`.flip-diagonal {
transform: rotate3d(1, 1, 0, 45deg);
}`}perspective(length) defines the distance between the viewer and the z=0 plane. Smaller values create more dramatic 3D effects.
{`.scene {
perspective: 800px;
}
.card-3d {
transform: rotateY(45deg);
}`}transform-origin changes the pivot point for transforms. Default is center center.
{`.swing-from-top {
transform-origin: top center;
transform: rotate(15deg);
}
.spin-from-corner {
transform-origin: 0 0;
transform: rotate(360deg);
}`}backface-visibility controls whether the back of an element is visible during 3D transforms. Essential for card-flip effects.
{`.card-face {
backface-visibility: hidden;
}
.card-back {
transform: rotateY(180deg);
}`}Timing Functions — Controlling the Rhythm
Timing functions define how an animation progresses from start to finish. The right curve can make an animation feel natural, playful, or mechanical.
Named Keywords
ease is the default: slow start, fast middle, slow end. Suitable for most UI transitions.
linear maintains constant speed. Use for rotations, color cycles, or mechanical movements.
ease-in starts slow and accelerates. Good for elements exiting the viewport.
ease-out starts fast and decelerates. Good for elements entering the viewport.
ease-in-out combines both: slow start and end with fast middle. Ideal for symmetric movements.
{`.enter {
animation-timing-function: ease-out;
}
.exit {
animation-timing-function: ease-in;
}
.rotate-constant {
animation-timing-function: linear;
}`}cubic-bezier(x1, y1, x2, y2)
Creates custom acceleration curves. The four values represent two control points that pull a Bezier curve. y values can exceed 0-1 for anticipation and overshoot effects.
{`.bounce-effect {
animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.smooth-decel {
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}`}steps(n, jump-term)
Creates frame-based animation by jumping between discrete steps instead of interpolating smoothly. Essential for sprite animation.
{`.sprite-walk {
animation: walk 1s steps(8, end) infinite;
}
/* jump-term options: jump-start | jump-end | jump-none | jump-both | start | end */`}@keyframes — Defining Animation Sequences
The @keyframes at-rule defines the intermediate states of an animation. Each keyframe specifies styles at a particular point in the animation timeline.
from/to Syntax
The simplest form uses from (0%) and to (100%) for two-state animations.
{`@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}`}Percentage-Based Keyframes
Define styles at any percentage point along the timeline. Multiple percentages can share the same block.
{`@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* Multiple percentages sharing a block */
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}`}Multi-Keyframe Complex Sequences
Complex animations can have many keyframes with overlapping property changes.
{`@keyframes slideAndFade {
0% { opacity: 0; transform: translateX(-50px); }
30% { opacity: 0.5; transform: translateX(10px); }
60% { opacity: 0.8; transform: translateX(-5px); }
100% { opacity: 1; transform: translateX(0); }
}`}Animation Events and WAAPI — JavaScript Integration
CSS animations emit events that JavaScript can listen to, enabling coordination between animation and application logic.
Animation Events
animationstart fires when the animation begins, after any delay.
animationend fires when the animation completes, including the final iteration.
animationiteration fires at the end of each iteration except the last.
{`const box = document.querySelector('.animated');
box.addEventListener('animationend', () => {
box.classList.add('animation-complete');
});
box.addEventListener('animationiteration', (e) => {
console.log('Iteration:', e.elapsedTime);
});`}Web Animations API (WAAPI)
The Web Animations API provides JavaScript control over animations with the same performance as CSS. It enables dynamic creation, playback control, and composition.
{`const element = document.querySelector('.box');
const animation = element.animate(
[
{ transform: 'translateX(0)', opacity: 1 },
{ transform: 'translateX(200px)', opacity: 0.5 },
{ transform: 'translateX(0)', opacity: 1 }
],
{
duration: 2000,
iterations: Infinity,
easing: 'ease-in-out',
direction: 'alternate'
}
);
// Programmatic control
animation.pause();
animation.play();
animation.reverse();
animation.finish();`}Performance — Animating at 60fps
Smooth animation requires understanding the browser rendering pipeline and which properties trigger which stages.
The Rendering Pipeline
Browser rendering follows four stages: JavaScript, Style, Layout, Paint, and Composite. Animating layout properties (width, height, top, left) triggers Layout, which is expensive. Animating paint properties (background-color, border-color) triggers Paint, which is moderately expensive. Animating composite properties (transform, opacity) skips Layout and Paint entirely, running on the GPU.
will-change
The will-change property hints to the browser that an element will animate, allowing preemptive optimization. Use it sparingly — overuse consumes GPU memory.
{`.will-animate {
will-change: transform, opacity;
}
/* Remove after animation completes to free resources */
.animation-done {
will-change: auto;
}`}Transform vs Position
Always prefer transform: translate() over changing top/left/position. Transforms are composited; position changes force layout recalculation of the entire document subtree.
{`/* Bad: triggers layout on every frame */
.bad {
position: relative;
left: 100px;
}
/* Good: GPU-composited */
.good {
transform: translateX(100px);
}`}FLIP Technique
FLIP (First, Last, Invert, Play) is a technique for animating layout changes performantly. Measure the initial and final positions, apply an inverted transform, then animate to neutral.
{`// First: measure initial position
const first = element.getBoundingClientRect();
// Apply state change (e.g., class toggle)
element.classList.toggle('expanded');
// Last: measure final position
const last = element.getBoundingClientRect();
// Invert: apply transform to match first position
const deltaX = first.left - last.left;
const deltaY = first.top - last.top;
element.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
// Play: animate to neutral
element.animate([
{ transform: `translate(${deltaX}px, ${deltaY}px)` },
{ transform: 'translate(0, 0)' }
], { duration: 300, easing: 'ease-out' });`}CSS Containment
Use contain: layout or contain: paint to isolate animated elements from the rest of the document, preventing layout recalculation from propagating upward.
{`.isolated-animation {
contain: layout style;
}`}Common Patterns — Copy-Paste Ready
These patterns cover the most frequently needed animation effects. Each is self-contained and ready to adapt.
Pulse
{`@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: 0.8; }
}
.pulse {
animation: pulse 2s ease-in-out infinite;
}`}Bounce
{`@keyframes bounce {
0%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
.bounce {
animation: bounce 1s ease infinite;
}`}Fade In
{`@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 0.5s ease-out forwards;
}`}Slide In
{`@keyframes slideIn {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.slide-in {
animation: slideIn 0.4s ease-out forwards;
}`}Shake
{`@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.shake {
animation: shake 0.5s ease-in-out;
}`}Spin
{`@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spin {
animation: spin 1s linear infinite;
}`}Flip Card
{`.scene {
perspective: 1000px;
}
.card {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card:hover {
transform: rotateY(180deg);
}
.card-face {
backface-visibility: hidden;
position: absolute;
width: 100%;
height: 100%;
}
.card-back {
transform: rotateY(180deg);
}`}Typewriter
{`@keyframes typewriter {
from { width: 0; }
to { width: 100%; }
}
.typewriter {
overflow: hidden;
white-space: nowrap;
border-right: 2px solid;
animation: typewriter 3s steps(40, end), blink 0.75s step-end infinite;
}
@keyframes blink {
from, to { border-color: transparent; }
50% { border-color: currentColor;
}`}FAQ — Common Questions About CSS Animation
What is the difference between animation and transition?
CSS transitions animate property changes between two states, typically triggered by user interactions like hover or focus. They require a starting and ending state and run once per trigger. CSS animations, defined with @keyframes, can have multiple intermediate states, run automatically on page load, loop infinitely, and offer precise control over timing, direction, and fill mode without requiring a trigger event.
How do I optimize CSS animations for performance?
Animate only transform and opacity properties, which are composited on the GPU without triggering layout or paint. Use will-change sparingly to hint the browser about upcoming animations. Avoid animating width, height, top, left, margin, or padding as these force layout recalculation. Use the FLIP technique for complex layout animations, and consider CSS containment to isolate animated elements from the rest of the document.
What is the CSS animation fill-mode property?
The animation-fill-mode property defines how an animation applies styles before and after execution. none means styles apply only during animation. forwards retains the final keyframe styles after completion. backwards applies the first keyframe styles before the animation starts. both combines forwards and backwards behavior, ensuring the element maintains styles from the first keyframe before start and the last keyframe after end.
How does cubic-bezier work?
The cubic-bezier timing function defines a custom acceleration curve using four numbers representing two control points: cubic-bezier(x1, y1, x2, y2). The x-axis represents time progression (0 to 1), and the y-axis represents animation progress (can exceed 0-1 for overshoot effects). The control points pull the curve, creating custom ease-in, ease-out, bounce, or elastic effects. Tools like cubic-bezier.com help visualize curves before applying them.
Can I animate CSS gradients?
Native CSS does not support animating gradient stops or colors directly because gradients are treated as images, not interpolable values. However, you can achieve gradient animation effects by animating background-position on an oversized gradient, using CSS custom properties with Houdini, animating opacity between overlapping gradient layers, or using the Web Animations API to animate custom properties in supported browsers.
Is the CSS Animation Cheat Sheet free?
Yes. The DevToolkit CSS Animation Properties Cheat Sheet is completely free with no limits, no registration, and no advertisements. It runs entirely in your browser with no data sent to any server.
Related Resources
CSS animation does not exist in isolation. It combines with layout systems, responsive design, and other CSS modules to create complete interfaces. If you are working with modern layout techniques, our CSS Grid and Flexbox Cheat Sheet provides a complementary reference for building responsive structures that serve as the foundation for animated components. For a broader overview of CSS properties beyond animation, the CSS Properties Cheat Sheet covers selectors, units, box model properties, and typography fundamentals.
Our interactive CSS Animation Properties Cheat Sheet is the fastest way to look up any animation property, copy a working example, and understand when to apply it. It is free, runs entirely in your browser, and requires no registration.