CSS Transitions

1. Anatomy of a transition

.btn {
  background: #5A8AB9;
  transition: background .25s ease, transform .25s ease;
  /*          property   duration timing              */
}
.btn:hover {
  background: #3E6787;
  transform: translateY(-2px);
}

Declare the transition on the base state so it runs both directions. Name properties explicitly rather than all — intentional, and cheaper. A fourth value adds delay: transition: opacity .3s ease .1s.

2. Easing, and what's animatable

transition-timing-function: ease;          /* default, natural   */
transition-timing-function: ease-out;      /* fast start — best for UI */
transition-timing-function: linear;        /* mechanical         */
transition-timing-function: cubic-bezier(.68,-0.55,.27,1.55); /* overshoot! */

Only properties with in-between values animate: colors, opacity, transform, dimensions. display: none can't transition (nothing between none and block) — the classic fade uses opacity + visibility instead. Performance rule: prefer transform and opacity; they skip layout entirely.

3. Try it yourself

The button snaps between states. Add transition: background .3s ease, transform .3s ease to .btn (not the hover!) and feel the difference.

4. Quiz — check your understanding