CSS Transitions

CSS Transitions — a practical guide to CSS transitions with clear examples you can reuse in real projects.

CSS Tutorial Series (72/109). Prefer one article? Read the complete CSS tutorial.

Short description

Transition opacity/transform for performance; avoid transitioning layout thrash properties carelessly.

Transition

.btn {
  transition: background-color 160ms ease, transform 160ms ease;
}
.btn:hover { transform: translateY(-1px); }