CSS Transitions, Transforms & Keyframe Animations

1. The Three Rendering Pipelines: How to Avoid Animation Jank

Writing high-performance 60fps / 120fps animations requires knowing which browser rendering pipeline your CSS properties trigger:

/* High-performance GPU-accelerated hover effect */
.fast-card {
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  /* Animate only transform and opacity */
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.fast-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
}

2. CSS Transitions & Timing Functions

A transition interpolates property values smoothly between two states (e.g. from default to :hover or :focus). It requires an explicit change of state to trigger.

• transition-property: The CSS properties to animate (prefer specific property names over all for performance).
• transition-duration: Time the transition takes (e.g. 200ms, 0.3s).
• transition-timing-function: The acceleration curve (ease, linear, ease-in, ease-out, cubic-bezier(x1, y1, x2, y2)).
• transition-delay: Pause before the transition starts.

3. CSS Transforms (translate, rotate, scale, skew)

The transform property alters visual coordinates without disrupting surrounding document flow:

• translate(x, y): Shifts position along horizontal and vertical axes (percentage values are relative to the element itself!).
• scale(x, y): Multiplies element dimensions (e.g. scale(1.1) increases size by 10%).
• rotate(deg): Rotates around the transform-origin point (defaults to element center).
• perspective(px): Establishes a 3D depth field for rotations along X and Y axes.

/* Transform combination example */
.transform-badge {
  display: inline-block;
  padding: 8px 16px;
  background: #2563eb;
  color: #ffffff;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.transform-badge:hover {
  transform: rotate(5deg) scale(1.1);
}

4. CSS Keyframe Animations (@keyframes)

Unlike transitions, @keyframes animations can run autonomously without requiring user interaction and can loop infinitely through complex multi-step choreographies.

The 8 Animation Properties:

1. animation-name: Corresponds to the identifier defined in @keyframes.
2. animation-duration: Total duration per cycle (e.g. 2s).
3. animation-timing-function: Easing between keyframes.
4. animation-delay: Initial wait time before first playback.
5. animation-iteration-count: Repetitions (integer or infinite).
6. animation-direction: normal, reverse, alternate, alternate-reverse.
7. animation-fill-mode: none, forwards (retains final frame), backwards, both.
8. animation-play-state: running or paused (dynamically pause via CSS!).

/* Infinite pulsing radar beacon */
.beacon {
  width: 24px;
  height: 24px;
  background-color: #10b981;
  border-radius: 50%;
  position: relative;
  margin: 30px auto;
}

.beacon::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 50%;
  background-color: #10b981;
  animation: radar-pulse 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

@keyframes radar-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(3.5); opacity: 0; }
}

5. Accessibility: prefers-reduced-motion

Rapid or excessive animations can trigger nausea, dizziness, and migraines in users with vestibular disorders. Always implement motion sensitivity overrides:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

6. Frequently Asked Questions (FAQ)