CSS Animation & Motion Mastery
for Backend Developers
Transitions, transforms, keyframes, easing curves, scroll-driven animations, the View
Transitions API, micro-interactions, loading states and accessibility — plus a complete
AI prompt library for motion design. From the absolute basics of
transition
to expert-level choreography. Built for developers who think in systems.
01 Why Motion Matters (Even for Backend Devs)
Motion is not decoration. It is feedback, hierarchy, and clarity. When a user clicks a button and nothing happens for 300ms, they click again. Motion tells them the system heard them.
You ship a form. User clicks Submit. The button does nothing for 800ms while the request runs. User clicks again. Now you have two requests and a confused user. Motion solves this in 200ms — a spinner, a button press effect, an optimistic UI update. No backend change needed. Just 3 lines of CSS.
🎯 What motion actually communicates
- Feedback — "I heard your click" (button press, ripple, focus ring)
- Continuity — "This thing became that thing" (modal opening from a button, tab switching)
- Hierarchy — "This is more important" (attention-drawing pulses, hover lift)
- Progress — "Something is happening" (spinners, skeletons, progress bars)
- Delight — "This is a joy to use" (spring animations, playful hovers)
Every animation should serve one of these five purposes. If it serves none, delete it.
Think of motion as your API's response codes for the visual layer. "200 OK" = hover confirmation. "202 Accepted" = loading spinner. "201 Created" = success animation. "500" = error shake. Users need visual status codes just as much as your services need HTTP status codes — otherwise they keep retrying.
⏱️ The 3 duration tiers you must remember
Fast — 100-150ms
Hover states, focus rings, button presses, color changes. Anything the user actively triggers and expects to feel instant.
Base — 200-350ms
Standard transitions: modals, dropdowns, tab switches, tooltips. The "default" duration for almost everything.
Slow — 400-700ms
Large surfaces, page transitions, scroll-driven reveals. Slower feels more "weighty" and dramatic — use sparingly.
02 Transitions — The Foundation
Transitions animate between two states. You define what changes, how long it takes, and how it feels. They are the simplest, most-used, and most-forgotten animation technique.
A transition is like a door on a hydraulic hinge. Without it, the door slams shut. With it, the door eases closed. The hinge doesn't decide whether the door closes — it decides how the closing feels. CSS transitions work the same way: they don't trigger state changes, they soften them.
/* The four longhand properties */
.box {
transition-property: transform, box-shadow, background-color;
transition-duration: .3s, .3s, .2s;
transition-timing-function: ease, ease, cubic-bezier(.4,0,.2,1);
transition-delay: 0s, 0s, .05s;
}
/* The shorthand — use this 95% of the time */
.box {
transition: transform .3s ease, box-shadow .3s ease;
}
/* Transition everything — convenient, but risky for perf */
.box { transition: all .3s ease; }
/* The complete hover state pattern */
.card {
transition: transform .3s cubic-bezier(.4,0,.2,1),
box-shadow .3s cubic-bezier(.4,0,.2,1),
border-color .2s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0,0,0,.15);
border-color: var(--primary);
}
/* Different durations for enter vs exit — the pro technique */
.toast {
opacity: 0;
transform: translateY(20px);
transition: opacity .3s ease, transform .3s ease;
}
.toast.visible {
opacity: 1;
transform: translateY(0);
/* Slower exit (when removing .visible) — different duration */
transition: opacity .15s ease, transform .15s ease;
}🎯 Which properties to transition (and which to avoid)
| Property | Performance | Use for | Notes |
|---|---|---|---|
transform | 🟢 GPU-accelerated | Move, rotate, scale | Never triggers layout |
opacity | 🟢 GPU-accelerated | Fade in/out | Never triggers paint |
filter | 🟡 GPU (moderate) | Blur, brightness, etc. | Cheaper than expected |
background-color | 🟡 Paint | Hover states | Fine, but not free |
box-shadow | 🟡 Paint (expensive) | Elevation change | OK on 1-2 elements |
color | 🟡 Paint | Text colour change | Fine, but not free |
width / height | 🔴 Layout | Avoid | Use transform: scaleX |
top / left | 🔴 Layout | Avoid | Use transform: translate |
margin / padding | 🔴 Layout | Avoid | Use transform |
✅ Do This
- Be explicit — list the properties you transition
- Use 150-300ms for most interactions
- Make exits faster than entrances
- Prefer
transformandopacity - Group related transitions with commas
❌ Not That
transition: all .5son every element- Transitioning
width,top, ormargin - 500ms+ durations for hover states
- No transition at all (jarring state changes)
- Transition on
display(it doesn't animate — useopacity+visibility)
03 Easing Curves — The Feel of Motion
Easing is what makes an animation feel professional or amateur. A straight line (linear) almost never looks right — real objects accelerate and decelerate.
Linear easing is a train on a straight track — same speed the whole way. ease-out is a car slowing to a stop. ease-in is a car accelerating from rest. cubic-bezier(.34, 1.56, .64, 1) is a bouncy castle — overshoots, comes back, settles. The curve is the personality.
🎯 The five standard easing keywords
| Keyword | Feels like | Best for |
|---|---|---|
linear | Robotic, constant | Progress bars, spinners (constant rotation) |
ease | Default, mild accel/decel | General purpose (rarely the best choice) |
ease-in | Slow start, fast end | Elements leaving the screen |
ease-out | Fast start, slow end | Elements entering the screen |
ease-in-out | Slow, fast, slow | State changes that go somewhere and back |
🎨 The three custom cubic-beziers every designer uses
/* 1. Smooth / standard — modern default, subtle */
:root {
--ease-standard: cubic-bezier(.4, 0, .2, 1);
}
/* 2. Spring / bouncy — playful overshoot, great for feedback */
:root {
--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}
/* 3. Anticipate — pulls back before moving forward, dramatic */
:root {
--ease-anticipate: cubic-bezier(.68, -.55, .27, 1.55);
}
/* Bonus: the "decelerate" curve — great for elements entering */
:root {
--ease-out-expo: cubic-bezier(.16, 1, .3, 1);
}
/* The trick: use different easings for enter vs exit */
.modal {
/* Enter — fast start, slow settle */
transition: opacity .3s var(--ease-out-expo), transform .4s var(--ease-out-expo);
}
.modal.closing {
/* Exit — smooth and quick */
transition: opacity .2s ease-in, transform .25s ease-in;
}
/* Multi-step easing with steps() — for typewriter effects */
.typewriter {
animation: typing 2s steps(20) forwards;
}ease-out (fast start, slow settle).
Elements leaving → ease-in (slow start, fast exit).
Elements transforming in place → ease-in-out.
Interactive feedback → spring (bouncy).
✅ Do This
- Default to
cubic-bezier(.4, 0, .2, 1) - Use
ease-outfor entrances - Use
ease-infor exits - Define 2-3 named easing tokens in
:root - Use spring easing for playful, delightful feedback
❌ Not That
linearon anything but rotation- Using a different easing per element (inconsistency)
- Overusing spring easing — everything bouncy is nauseating
- Custom beziers you can't explain
- Forgetting that the default
easeis rarely the best choice
04 Transforms — Moving Without Breaking Layout
Transforms change how an element is rendered without affecting layout. That is what makes them the fastest, safest animation property in the entire CSS language.
Transforms are like moving an actor around a stage with lighting effects. The actor doesn't physically change, and the other actors don't need to rearrange themselves. The appearance changes — position, scale, rotation — but nothing else on stage is affected. That's why transforms are so fast.
🎯 The four transform functions
translate(x, y)
Moves the element by x pixels right and y pixels down. Does not affect layout. Use for hover lift, slide-in, spring movement.
scale(x, y)
Scales the element. 1 = normal, 1.5 = 150%, 0.5 = half. Use for emphasis, hover growth, press-in effect.
rotate(deg)
Rotates around the center (or transform-origin). Use for icon spins, playful hovers, loading states.
skew(x, y)
Skews the element at an angle. Used less often — great for playful "isometric" looks and shine effects.
/* Basic transforms — combine with space separation */
.box {
transform: translateY(-4px) scale(1.05);
}
/* The "hover lift" — the most useful single animation */
.card {
transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(0,0,0,.15);
}
/* The "press-in" effect — button feel */
.btn:active {
transform: scale(.96);
}
/* Scale from a corner — set transform-origin */
.badge {
transform-origin: top right;
transform: scale(0);
transition: transform .3s var(--ease-spring);
}
.parent:hover .badge {
transform: scale(1);
}
/* Individual transform properties — the modern way (Chrome 104+) */
.box {
translate: 0 -4px; /* instead of transform: translate() */
rotate: 5deg; /* instead of transform: rotate() */
scale: 1.05; /* instead of transform: scale() */
/* These animate independently! */
}
/* 3D transforms — with perspective on the parent */
.stage { perspective: 800px; }
.card:hover {
transform: rotateY(15deg) rotateX(-5deg);
}
/* The GPU hint — use sparingly, only when needed */
.animated {
will-change: transform;
/* Remove will-change after animation completes */
}transform: translateY(-4px) scale(1.05) — one declaration, one transition.
The new way: translate: 0 -4px; scale: 1.05; — separate properties that can have different durations and easings. Modern browsers (Chrome 104+, Safari 14.1+, Firefox 72+) support the individual properties. Use them when you want to animate each independently.
✅ Do This
- Default to
transformfor movement - Use
translateY(-4px)for hover lift - Use
scale(.95)for press-in feedback - Set
transform-originwhen scale should not be centered - Combine translate + scale for organic motion
❌ Not That
- Using
position: relative; top: -4pxinstead oftransform - Animating
widthorheightwhen scale would work - Large scale values (1.5+) on text — blurry rendering
- Transforms on
bodyorhtml - Forgetting
will-changeon continuously animated elements
05 Keyframes — Multi-Step Animation
Transitions go from A to B. Keyframes go from A to B to C to D — with full control over every step. This is how you build spinners, pulses, wiggles, and complex choreography.
A transition is two frames — before and after. A keyframe animation is a flip-book — you draw every frame in between. @keyframes is you drawing the flip-book. animation is you flipping through it at a set speed.
/* Define a keyframe */
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: .7; }
}
/* Apply it to an element */
.notify-dot {
animation: pulse 2s ease-in-out infinite;
}
/* The animation shorthand broken down */
.element {
animation-name: pulse;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite; /* or 1, 2, 3... */
animation-direction: normal; /* or reverse, alternate, alternate-reverse */
animation-fill-mode: both; /* keeps the final state */
animation-play-state: running; /* or paused */
}
/* Staggered animation — the classic load-in effect */
.item { animation: fadeIn .5s ease-out both; }
.item:nth-child(1) { animation-delay: 0s; }
.item:nth-child(2) { animation-delay: .1s; }
.item:nth-child(3) { animation-delay: .2s; }
.item:nth-child(4) { animation-delay: .3s; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Pausing an animation */
.marquee:hover { animation-play-state: paused; }
/* Multiple animations at once */
.complex {
animation:
fadeIn .4s ease-out both,
slideUp .6s cubic-bezier(.34,1.56,.64,1) both;
}A transition is event-driven — it fires when the state changes. An animation is a scheduled loop — it runs on its own timeline, independent of user interaction. Use transitions for "user did X, do Y"; use keyframe animations for "always be pulsing" or "loop this forever."
✅ Do This
- Use percentages for multi-step animations
- Group 0% and 100% when they share the same styles
- Use
animation-fill-mode: bothto keep final state - Stagger delays with
:nth-child()for load-in effects - Pause on hover with
animation-play-state
❌ Not That
- Keyframes on
width,height, orleft - Infinite animations everywhere (performance + distraction)
- Long delays (>500ms) — the user thinks it's broken
- Forgetting
animation-fill-mode - Using animations for what a transition would handle
06 Interactive Keyframe Library
Twelve production-ready keyframe animations. Click any card to copy the full
@keyframes block plus its usage example.
07 Micro-interactions — The Details That Matter
Micro-interactions are the tiny animations that respond to a user's action. They confirm the system heard them, and they are what makes a UI feel polished instead of functional.
Physical buttons make a click sound. Physical switches snap into place. When your digital UI does the same, your users feel like they actually did something. When it doesn't, the interaction feels dead. Micro-interactions are how you make digital feel physical.
🎯 The six most impactful micro-interactions
/* 1. The perfect button — 4 states, 4 animations */
.btn {
transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(6,182,212,.35);
}
.btn:active {
transform: translateY(0) scale(.97);
transition-duration: .05s;
}
.btn:focus-visible {
outline: none;
box-shadow: 0 0 0 4px rgba(6,182,212,.3);
}
/* 2. Icon rotate on hover — great for arrows, chevrons, plus icons */
.icon-button {
transition: background-color .2s ease;
}
.icon-button svg {
transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.icon-button:hover svg {
transform: rotate(15deg) scale(1.1);
}
/* 3. Arrow slide — the "learn more" effect */
.link-arrow svg {
transition: transform .2s ease;
}
.link-arrow:hover svg {
transform: translateX(4px);
}
/* 4. Input focus glow */
.input {
border: 2px solid var(--c4-border);
transition: border-color .2s ease, box-shadow .2s ease;
}
.input:focus {
outline: none;
border-color: var(--c4-primary);
box-shadow: 0 0 0 4px rgba(6,182,212,.15);
}
/* 5. Checkbox tick animation */
.checkbox svg path {
stroke-dasharray: 24;
stroke-dashoffset: 24;
transition: stroke-dashoffset .3s ease-out .1s;
}
.checkbox input:checked ~ svg path {
stroke-dashoffset: 0;
}
/* 6. Ripple effect on click (using pseudo-element) */
.ripple-btn {
position: relative;
overflow: hidden;
}
.ripple-btn::after {
content: '';
position: absolute;
inset: 50%;
background: rgba(255,255,255,.5);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform .5s ease-out, opacity .5s ease-out;
opacity: 1;
}
.ripple-btn:active::after {
transform: translate(-50%, -50%) scale(8);
opacity: 0;
transition: 0s;
}transition-duration: .05s or even 0s on
:active. The release (going back to normal) can be slower
(150-200ms). This mimics physical buttons that snap in and ease out.
08 Loading States — Never Leave Users Guessing
Loading states are the most important animations you will ever write. They are the difference between "this is responsive" and "I think it's broken."
🎯 Which loading pattern to use when
| Pattern | Use when | Duration |
|---|---|---|
| Spinner | Unknown wait time, full-page or section load | Indefinite |
| Skeleton | Loading content with a known structure | 200ms - 2s |
| Progress bar | Known duration (uploads, downloads, wizards) | Has an end |
| Dots / pulse | Small inline wait (chat, typing indicator) | Indefinite |
| Shimmer | Large content areas loading | Indefinite |
| Optimistic UI | Fast operations (likes, saves) — show result immediately | Instant |
| Button spinner | Form submissions, single actions | Has an end |
/* 1. Spinner — the classic, works everywhere */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(0,0,0,.1);
border-top-color: var(--brand);
border-radius: 50%;
animation: spin .8s linear infinite;
}
/* 2. Skeleton — mimic the content layout */
@keyframes skeleton {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton {
background: linear-gradient(90deg, #E2E8F0 0%, #F1F5F9 50%, #E2E8F0 100%);
background-size: 200% 100%;
animation: skeleton 1.5s ease-in-out infinite;
border-radius: 8px;
}
/* 3. Button with spinner — inline loading state */
.btn.is-loading {
color: transparent;
pointer-events: none;
position: relative;
}
.btn.is-loading::after {
content: '';
position: absolute;
inset: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border: 2px solid rgba(255,255,255,.4);
border-top-color: #fff;
border-radius: 50%;
animation: spin .8s linear infinite;
}
/* 4. Progress bar — determinate loading */
.progress-fill {
height: 100%;
background: var(--brand);
border-radius: 999px;
transition: width .3s ease-out;
}
/* 5. Skeleton lines — mimic text */
.skeleton-line {
height: 12px;
border-radius: 6px;
margin-bottom: 10px;
background: #E2E8F0;
animation: skeleton 1.5s ease-in-out infinite;
}
.skeleton-line:last-child { width: 70%; }setTimeout(() => showSpinner(), 200) delay
so fast operations never show loading at all. Users perceive fast loads as instantaneous.
09 Scroll-Driven Animations — Native, No JS
Scroll-driven animations link a keyframe animation to a scroll position instead of time. The animation progresses as the user scrolls — and it is all done in CSS, without JavaScript.
Regular animations run on a timer. Scroll-driven animations run on a scrollbar. Every pixel the user scrolls becomes a tick in the animation. The user is literally the timeline. This is why fade-in-on-scroll feels so natural — it responds to what the user is doing, not what the clock says.
/* Method 1: view() timeline — animates as the element enters/exits the viewport */
.reveal {
animation: fadeUp linear both;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
/* Method 2: scroll() timeline — animates as the container scrolls */
.progress-bar {
transform-origin: left;
animation: scaleProgress linear;
animation-timeline: scroll(root);
}
@keyframes scaleProgress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* Reading progress indicator — a common, practical use case */
.reading-progress {
position: fixed;
top: 0; left: 0;
height: 3px;
width: 100%;
background: var(--brand);
transform-origin: left;
z-index: 100;
animation: scaleProgress linear;
animation-timeline: scroll(root);
}
/* Fallback for browsers without scroll-driven support */
@supports not (animation-timeline: view()) {
.reveal {
opacity: 1;
transform: none;
}
}🎯 animation-range keywords
| Keyword | When the animation runs |
|---|---|
entry 0% cover 100% | Default — starts when element enters viewport, ends when it fully exits |
cover 0% cover 100% | From the element's first pixel visible to its last pixel visible |
entry 0% entry 100% | Entrance only — element is entering the viewport |
exit 0% exit 100% | Exit only — element is leaving the viewport |
contain 0% contain 100% | Element fully contained in viewport |
✅ Do This
- Provide a fallback with
@supports not - Use
view()for reveal-on-scroll effects - Use
scroll()for progress indicators - Choose the shortest useful
animation-range - Test on mobile — scroll-driven animations shine there
❌ Not That
- Animating expensive properties in scroll timelines
- Scroll-driven animations on long lists (jank)
- Forgetting the fallback for older browsers
- Using scroll-driven for things that should animate on click
- Overusing — every element flying in gets old fast
10 The View Transitions API — Page-Level Animation
The View Transitions API is the biggest animation feature in years. It lets you animate between two completely different DOM states — SPA navigations, tab switches, modal open/close — with just a few lines of CSS.
Imagine you're editing a movie and want to smoothly cut from one scene to the next. You don't want to draw every frame yourself — you want the editor to handle the crossfade. That's exactly what View Transitions does for the DOM. The browser snapshots the old state and new state, then smoothly morphs between them. Your job is just to say "animate this."
// Basic usage — wrap your DOM update in startViewTransition
document.startViewTransition(() => {
// Update the DOM as you normally would
container.innerHTML = '<h1>New Page</h1>';
});
// The browser automatically cross-fades between old and new states.
// No CSS required for the basic effect.
// Customize the animation with CSS
/* In your CSS file: */
::view-transition-old(root) {
animation: fade-out .3s ease-out;
}
::view-transition-new(root) {
animation: fade-in .3s ease-in;
}
// Named transitions for shared elements (like a hero image that grows)
/* CSS */
.hero-image { view-transition-name: hero; }
/* The browser will morph the small hero image into the large one
when navigating between pages, automatically. */
/* You can override the shared transition */
::view-transition-group(hero) {
animation-duration: .5s;
animation-timing-function: cubic-bezier(.34,1.56,.64,1);
}🎯 What you can animate with View Transitions
Page navigations
Cross-fade between pages (works with MPA navigation too, via the navigation API)
List to detail
A card in a list morphs into the full detail view — the "shared element" effect
Tab switches
Content smoothly fades as you switch tabs, no janky content swaps
Modal open/close
The modal naturally scales up from where you clicked — much smoother than manual animation
if (document.startViewTransition) { ... }.
11 Motion Design Principles — From Amateur to Expert
These are the principles real motion designers use. They are the difference between "someone learned CSS transitions" and "someone who understands motion."
Anticipation
Before a big motion, pull back slightly. Like a baseball pitcher winding up before throwing. Use cubic-bezier(.68, -.55, .27, 1.55) for this.
Overshoot & settle
Real objects overshoot their target and settle back. Use spring easing for interactive elements. Never overshoot to more than 10% beyond the target.
Stagger
Multiple elements should not arrive at once. Add 50-100ms delays between each. This makes lists feel choreographed rather than mechanical.
Ease in vs ease out
Entering elements ease OUT (fast then slow). Leaving elements ease IN (slow then fast). This mirrors how physical objects move in space.
Focus attention
Big motion attracts the eye. Use it for the element you want users to look at next. Avoid simultaneous big motions (eyes can't follow two things).
Consistency
Every transition in your system should use one of 3-5 easing tokens. Consistency is what makes motion feel designed instead of accidental.
Respect the content
Never animate reading content (text) with large movements. Motion should support content, not compete with it.
Less is more
One great animation beats five mediocre ones. If you can't justify the animation with one of the 5 purposes, delete it.
Just like good API design has principles (consistent naming, predictable errors, minimal surface area), good motion design has principles. The overlap is striking: consistency (predictability), focus (single responsibility), restraint (minimal API surface). Motion is just another interface contract with your users.
✅ Do This
- Stagger related elements by 50-100ms
- Different easings for enter vs exit
- Keep it subtle — you'll appreciate it more over time
- Animate transform + opacity whenever possible
- Test on slower devices to catch jank
❌ Not That
- Animate everything on load (sensory overload)
- Same duration for every animation
- Long durations (>700ms) except for hero moments
- Infinite animations on primary content
- Motion that competes with text for attention
12 Accessibility — Motion is Optional
Some users get physically sick from motion. Vestibular disorders, ADHD, and autism can all make animations genuinely harmful. Respecting their preference is not optional — it is an accessibility requirement.
Imagine the "scroll-jacking" animations you've seen on fancy websites. For most users, they're a bit much. For users with vestibular disorders, they can trigger genuine nausea and dizziness that lasts for hours. Your parallax hero section could literally make someone sick. That's why prefers-reduced-motion exists.
/* The gold standard: reduce all animations dramatically */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* Nuanced approach — keep essential animations, remove decorative ones */
@media (prefers-reduced-motion: reduce) {
/* Remove decorative parallax and scroll animations */
.hero-video, .parallax-bg, .mesh-animation {
animation: none;
}
/* Keep essential loading spinners, but make them subtle */
.spinner {
animation-duration: 1.5s; /* slower, less jarring */
}
/* Replace slide animations with fades */
.modal {
transform: none !important;
transition: opacity .2s ease;
}
}
/* The HTML attribute approach — user toggles motion manually */
[data-motion="off"] * {
animation-duration: 0s !important;
transition-duration: 0s !important;
}🎯 What to reduce and what to keep
| Animation type | Reduce? | Why |
|---|---|---|
| Loading spinners | Keep (but slower) | Essential feedback — user needs to know something is happening |
| Parallax backgrounds | ❌ Remove entirely | Top trigger for vestibular issues |
| Scroll-driven reveals | Replace with fade only | Motion is decorative, fade is enough |
| Hover lifts | Reduce scale/translate amount | Subtle motion is fine, big motion is not |
| Modal slide-ins | Replace with fade | Large movements cause nausea |
| Icon rotations | Keep as-is | Small, contained motion is safe |
| Button presses | Keep as-is | Essential feedback, tiny motion |
| Infinite pulsing | Disable or slow | Continuous motion is exhausting |
13 Performance — Making Motion Fast
Every animation has a cost. Knowing which properties are cheap and which are expensive is what separates smooth 60fps animations from janky ones.
| Property | Cost | Pipeline stage | Verdict |
|---|---|---|---|
transform | 🟢 Cheapest | Composite only | Use everywhere |
opacity | 🟢 Cheapest | Composite only | Use everywhere |
translate, rotate, scale | 🟢 Cheapest | Composite only | Modern alternative to transform |
filter | 🟡 Moderate | Paint + Composite | OK, but not on many elements |
color, background-color | 🟡 Moderate | Paint + Composite | Fine for hover states |
box-shadow | 🟡 Expensive | Paint + Composite | Avoid animating on many elements |
width, height | 🔴 Very expensive | Layout + Paint + Composite | Use transform: scale instead |
top, left, margin, padding | 🔴 Very expensive | Layout + Paint + Composite | Use transform: translate instead |
/* The 60fps checklist */
/* 1. Only animate transform + opacity whenever possible */
.card {
transition: transform .3s ease, opacity .3s ease; /* ✅ fast */
}
/* 2. will-change — hint the GPU (use sparingly) */
.heavy-animation {
will-change: transform;
/* Remove this AFTER the animation completes —
otherwise you're wasting GPU memory */
}
/* 3. Promote to its own layer (careful — do not overdo) */
.complex-animation {
transform: translateZ(0);
/* This forces a GPU layer. Use only when needed */
}
/* 4. Pause animations that are off-screen */
.offscreen-animation {
animation-play-state: paused;
}
.onscreen .offscreen-animation {
animation-play-state: running;
}
/* Use IntersectionObserver in JS to toggle .onscreen */
/* 5. Use CSS containment — tell the browser what will not change */
.card {
contain: layout paint;
}
/* 6. Reduce transform complexity — combine once */
.box {
/* ✅ good: single composite transform */
transform: translate3d(10px, 20px, 0) rotate(5deg) scale(1.1);
}
/* 7. Debounce infinite animations on old devices */
@media (prefers-reduced-motion: reduce),
(update: slow) {
.infinite-animation {
animation: none;
}
}width/height, too many
box-shadow animations, and heavy backdrop-filter.
14 AI Workflows for Motion Design
AI is excellent at generating motion variations — timings, easings, keyframe sequences. Use it to explore the space faster than you could by hand.
AI is best at: generating variations ("give me 5 ways to animate this card"), explaining easing curves, reviewing motion for accessibility, and producing keyframe sequences from a description. It is worst at knowing your brand and context — so the final decisions are always yours.
🤖 Five high-value AI prompts for motion
Motion variations
"Give me 5 ways to animate a success toast appearing in the bottom-right corner, each with different easing and duration."
Easing explainer
"Explain cubic-bezier(.34, 1.56, .64, 1) in plain English and give me 3 real-world UI cases where I'd use it."
Motion review
"Review this animation code for performance and accessibility issues. Flag anything that animates layout properties."
Choreography
"Design a stagger animation for a 6-item list. Each item should fade up 40px, with 80ms between each. Give me the CSS."
Reduced motion
"Rewrite this animation to include a proper prefers-reduced-motion fallback, using the nuanced approach (keep essential, remove decorative)."
Loading pattern
"Give me 4 loading patterns (spinner, skeleton, progress, pulse) for a card that takes 1.5s to load. Include CSS for all 4."
15 AI Prompt Library — 20 Ready-to-Use Prompts
Battle-tested prompts for motion design. Click any card to copy the prompt.
16 Cheat Sheet — Everything on One Screen
Bookmark this. It's the reference card you'll come back to.
| Goal | Snippet |
|---|---|
| Hover lift | transition: transform .3s; :hover { transform: translateY(-4px); } |
| Press-in | :active { transform: scale(.96); } |
| Focus ring | :focus-visible { box-shadow: 0 0 0 4px rgba(6,182,212,.3); outline: none; } |
| Fade in | @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } |
| Fade up | from { opacity: 0; transform: translateY(20px); } |
| Stagger reveals | .item:nth-child(2) { animation-delay: .1s; } |
| Spring easing | cubic-bezier(.34, 1.56, .64, 1) |
| Standard easing | cubic-bezier(.4, 0, .2, 1) |
| Spinner | border: 4px solid; border-top-color: brand; animation: spin .8s linear infinite; |
| Skeleton | background: linear-gradient(90deg, #eee, #fff, #eee); background-size: 200%; animation: shimmer 1.5s infinite; |
| Infinite pulse | animation: pulse 2s ease-in-out infinite; |
| Scroll reveal | animation-timeline: view(); animation-range: entry 0% cover 40%; |
| Reading progress | animation-timeline: scroll(root); |
| Respect reduced motion | @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms; } } |
| GPU hint | will-change: transform; /* use sparingly */ |
⏱️ Duration quick reference
100-150ms
Micro-interactions: hover, focus, press. Should feel instant.
200-350ms
Standard: modals, dropdowns, tab switches, tooltips. The default.
400-700ms
Large surfaces: page transitions, hero reveals, dramatic effects.
- Animating
width,height,top, orleft transition: all .5son every element- Infinite animations on primary content
- Durations longer than 700ms for standard UI
- No
prefers-reduced-motionsupport - Same easing curve for everything
- No fallback for scroll-driven or View Transition animations
17 Test Yourself
Twenty questions. Instant feedback. Explanations for every answer.
🎯 Part 4 Knowledge Check
18 Frequently Asked Questions
The questions backend developers ask most often about animation.
What is the difference between transition and animation in CSS?
transition animates between two states — triggered by a state change like :hover or a class toggle. animation plays a keyframe sequence with full control over every step. Use transitions for simple state changes and animations for multi-step or looping effects.Which properties are safe to animate for performance?
transform and opacity are fully GPU-accelerated and never trigger layout reflow. Properties like width, height, top, left and margin cause layout recalculation and are expensive. Modern CSS offers individual transform properties (translate, rotate, scale) that are equally performant.What is prefers-reduced-motion and why does it matter?
prefers-reduced-motion is a media query that detects when a user has requested less animation in their OS settings. This is commonly set by users with vestibular disorders, ADHD, or motion sensitivity. Respecting it is an accessibility requirement, not a preference — you must reduce or eliminate animations for those users.How do scroll-driven animations work in CSS?
animation-timeline: scroll() or view() to link a keyframe animation to a scroll position rather than time. The animation progresses as the user scrolls, with no JavaScript required. animation-range controls which portion of the scroll drives the animation.What is the View Transitions API?
document.startViewTransition() and the browser snapshots the old and new states, cross-fading between them automatically. You can then add custom keyframes using ::view-transition pseudo-elements.What is a cubic-bezier and when should I use it?
cubic-bezier() defines a custom easing curve with four control points. Use standard keywords (ease, ease-in-out, ease-out) for most cases. Use custom cubic-bezier for branded motion — for example, cubic-bezier(.34, 1.56, .64, 1) produces a springy overshoot effect that feels playful and modern.How many durations should a motion system have?
What is the difference between transform: translate and position: relative; top?
transform: translate is GPU-accelerated and does not trigger layout. position: relative; top triggers layout recalculation and is much slower. Always prefer transform for movement.Why do loading spinners need a delay?
What is animation-fill-mode and when do I need it?
animation-fill-mode: both keeps the element in the final keyframe state after the animation ends. Without it, the element snaps back to its original state. Use both for most reveal animations — forwards works too, but both handles delay + end state correctly.What is the difference between ease-in and ease-out?
ease-in starts slow and ends fast — feels like accelerating. Use for elements leaving the screen. ease-out starts fast and ends slow — feels like decelerating. Use for elements entering the screen. This mirrors how real objects move in space.What comes next in this series?
🗺️ The Full 5-Part Roadmap
Design Tokens & Architecture
Custom properties, theming, namespacing, cascade layers, modern reset, fluid type.
Layout Mastery
Box model, display, positioning, Flexbox, Grid, alignment, container queries and real-world recipes.
Visual Polish & AI
Colour (OKLCH, color-mix), gradients, elevation, glassmorphism, filters, 3D, plus a complete AI prompt library.
Animation & Motion
Transitions, transforms, keyframes, easings, micro-interactions, loading states, scroll animations, View Transitions, AI prompts.
Responsive & Performance
Container queries, responsive strategy, rendering performance, and shipping a real component library.
🔗 Continue Learning on FreeLearning365
Free tools, guides and learning paths that pair well with this series.
 | FreeLearning365){kind=link}
0 Comments
thanks for your comments!