Transitions, Transforms and Animation

Motion can guide attention and make an interface feel alive. Used carelessly, it distracts and makes people dizzy.

Transitions

A transition animates a change between two states. Specify the property, duration and easing.

.button {
  background: #5e256d;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  transition: background 200ms ease, transform 200ms ease;
}

.button:hover {
  background: #7b2d8f;
  transform: translateY(-2px);
}

Transforms

Use transform instead of changing width or top for movement. It is smoother because the browser can animate it without recalculating layout.

• translateY(-2px) lifts an element.
• scale(1.05) enlarges it slightly.
• rotate(2deg) tilts it.
• transform-origin sets the pivot point.

Keyframes

A keyframe animation runs a sequence automatically. Keep loops subtle and provide a reduced-motion option.

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

.badge {
  animation: pulse 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .badge { animation: none; }
}

Practice

1. Add a hover lift to a button.
2. Animate a loading dot with keyframes.
3. Disable the animation when reduced motion is requested.

Hands-on exercise

Style a .button so that on hover it:
1. Moves up by 3px.
2. Grows to 1.03 scale.
3. Changes background colour.
Use a 180ms transition with ease easing.

Recap

Transitions animate state changes, transforms move without breaking layout, and keyframes run sequences. Respect reduced-motion settings.