Animation, Visually

Two tools: transitions & keyframes

CSS gives you two ways to move things, and picking the right one is half the battle:

Transitions: smooth A → B

A transition tells the browser to animate a change instead of snapping. You set it once; it fires whenever the value changes. Four parts: property, duration, timing function, optional delay.

.box {
  transition: transform .35s ease;   property duration easing
}
.box:hover { transform: scale(1.15); }   the change that gets animated

What to animate (and what to avoid)

Not all properties are equal. Some are cheap for the browser to animate at 60fps; others force expensive recalculation of the whole layout and cause jank.

transform: move, scale, rotate, skew

transform is the workhorse. It repositions an element visually without disturbing the layout around it. Click each to see it (with a springy easing):

Easing: the personality of motion

The timing function controls how speed changes over the duration. linear is robotic; real motion accelerates and decelerates. Hit Run — all four balls travel the same distance in the same time, but feel completely different:

transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(.34, 1.56, .64, 1);  overshoots = bouncy

@keyframes: multi-step sequences

When you need more than a single A → B, define the steps with @keyframes — using from/to or percentages — then attach it with the animation property. Hit replay:

@keyframes dance {
  0%   { transform: translateY(0) rotate(0); }
  30%  { transform: translateY(-40px); }
  60%  { transform: rotate(180deg); border-radius: 50%; }
  100% { transform: rotate(360deg); }
}
.box { animation: dance 1.4s ease-in-out; }

The animation properties

The animation shorthand bundles several controls. Know them individually — especially iteration, direction, and fill-mode:

animation: pulse 1.5s ease-in-out 0s infinite alternate;
/*         name  dur   easing      delay  count    direction */

The effects you'll reach for

Most real-world animation is a handful of recognizable patterns. Here they are, all looping live:

Keep it fast & accessible

• Animate only transform and opacity for anything that moves often or loops (Step 3).
• Keep UI animations short — 150–400ms. Long animations feel sluggish.
• Animate with purpose: feedback, guiding the eye, showing relationships. Motion for its own sake distracts.
• Always honor prefers-reduced-motion — some users feel ill from motion. This very page disables its animations when that's set.

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

Animation checklist

• transition for state changes; @keyframes for sequences & loops
• Move with transform, fade with opacity — not top/left/width
• Durations are short (150–400ms) with a real easing, not linear
• Looping effects use infinite (+ alternate where it suits)
• forwards used when an entrance should hold its end state
• prefers-reduced-motion is respected

Keep going