Motion Design Principles For CSS

Human perception has a deeply ingrained expectation, built from a lifetime of observing physical objects, that motion accelerates and decelerates — a dropped object speeds up, a car pulling away from a stop starts slow and gains speed, nothing in the physical world instantly snaps to a constant velocity and holds it. linear timing violates this expectation directly, which is exactly why it reads as robotic or artificial even when technically smooth.

ease-out (fast start, gradually slowing to the end) is generally the strongest default for elements entering or responding to user action, since it front-loads the perceived responsiveness while still decelerating naturally into its resting state. ease-in-out suits animations that both start and end 'at rest', like a toggle switching between two stable states.

A useful mental model: duration should roughly track how much visual 'distance' or state change is actually occurring. A small toggle or checkbox flipping state is naturally a quick, snappy motion — something in the 100-200ms range typically feels right. A modal expanding from a small trigger point to fill much of the screen is a substantially larger visual change, and a slightly longer duration (250-400ms) generally reads as more intentional and less jarring than the same ultra-fast timing applied to a tiny UI element.

Using one single fixed duration value across an entire design system, applied uniformly regardless of what's actually animating, is a common motion design mistake — it optimizes for consistency of *code* over consistency of *feel*, when the two aren't the same thing.

When a single interaction triggers multiple elements animating at once — most commonly a modal's backdrop fading in alongside its container scaling up and its content fading in — animating all three with identical timing and zero delay tends to feel flat, like everything is one undifferentiated blob of motion rather than a layered composition.

A small, deliberate stagger — the backdrop starting immediately, the container starting 50ms later, the content starting 100ms after that — creates a sense of depth and hierarchy: the backdrop establishes context first, the container frame follows, and the content settles in last. This mirrors how a physical object entering a scene wouldn't have every part of it move in perfect, robotic unison, and is a small technique (animation-delay per element) with an outsized effect on perceived polish.

Technically Correct Isn't The Same As Feeling Right. A perfectly performant, Composite-only, jank-free animation can still feel wrong — too linear, too long, too abrupt. Motion design is the layer of judgment above raw CSS syntax: choosing easing curves, durations, and sequencing that communicate the right thing to a user, not just render smoothly.

Easing: Why linear Feels Robotic. Real-world motion almost never moves at a perfectly constant speed — objects accelerate and decelerate. linear timing produces a mechanical, artificial-feeling motion precisely because it violates that expectation; ease-out (fast start, slow finish) and ease-in-out are the default building blocks for motion that reads as natural rather than robotic.

Why linear Feels Wrong. Why does linear easing tend to feel mechanical or artificial compared to ease-out?

• →linear is always objectively slower than other easing functions
• →Real-world motion almost never moves at a perfectly constant speed, so linear violates that natural, expected pattern
• →It's a rendering inconsistency across different browsers

Duration Should Be Proportional To Distance And Change. A small UI element moving a short distance should animate faster than a large element making a dramatic state change — using the same fixed duration for every animation regardless of how much is actually changing produces motion that feels either too rushed for big changes or unnecessarily sluggish for small ones.

Duration Proportionality. Why might using the exact same 0.3s duration for both a checkbox toggle and a full-screen modal opening feel wrong?

• →It actually wouldn't feel wrong — duration doesn't need to relate to the change size
• →A tiny checkbox change animating for the same duration as a large modal will feel disproportionately slow, while the modal might feel rushed
• →0.3s is always too fast for any UI element regardless of size

Choreography: Sequencing Multiple Elements. When several elements animate together — a modal's backdrop, container, and content — staggering their timing slightly (a small animation-delay per element) rather than moving everything in perfect unison creates a sense of hierarchy and depth that a single simultaneous movement doesn't communicate.

Choreographed Sequencing. What does staggering the animation-delay of several related elements (like a modal's backdrop, container, and content) achieve over animating them all simultaneously?

• →It makes the overall animation complete faster
• →It creates a sense of visual hierarchy and depth that a single simultaneous movement doesn't communicate
• →There's no perceptible difference to users

Motion Design Judgment Developed. You now understand the design judgment layer above raw animation syntax: why easing curves read as natural while linear feels robotic, why duration should scale with the size of the change being animated, and how staggered choreography across multiple elements creates a sense of depth a single simultaneous movement can't.

Choose An Easing Curve. animation-timing-function shapes how an animation accelerates and decelerates.