Transitions & Animations

Bringing CSS to Life

Transitions vs Animations

Feature	Transitions	Animations
Triggered by	State change (hover, class toggle)	Automatic or triggered
Keyframes	Start and end only	Multiple steps
Repeat	Only on trigger	Can loop infinitely
Direction	Forward on trigger, reverse on un-trigger	Normal, reverse, alternate
JavaScript needed	Only to toggle class/state	Can run without JS

GPU-Accelerated Properties

Only these properties can be animated on the compositor thread (GPU) without triggering layout or paint:

Property	GPU Accelerated?	Performance
transform	✅ Yes	🟢 Excellent
opacity	✅ Yes	🟢 Excellent
filter	✅ Yes (mostly)	🟡 Good
width / height	❌ No	🔴 Causes reflow
top / left	❌ No	🔴 Causes reflow
margin / padding	❌ No	🔴 Causes reflow
background-color	❌ No	🟡 Causes repaint

Timing Functions

Keyword	cubic-bezier	Feel
ease	cubic-bezier(0.25, 0.1, 0.25, 1)	Natural, starts fast, slows down
ease-in	cubic-bezier(0.42, 0, 1, 1)	Accelerates (entering)
ease-out	cubic-bezier(0, 0, 0.58, 1)	Decelerates (exiting)
ease-in-out	cubic-bezier(0.42, 0, 0.58, 1)	Slow start and end
linear	cubic-bezier(0, 0, 1, 1)	Constant speed (robotic)

The animation-fill-mode Property

Value	Before Animation	After Animation
none	Original styles	Reverts to original
forwards	Original styles	Keeps final keyframe ✅
backwards	Uses first keyframe	Reverts to original
both	Uses first keyframe	Keeps final keyframe ✅

Reduced Motion

Always respect users who prefer reduced motion (vestibular disorders, motion sensitivity):

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