✨ Archive Spotlight: Animating Movement Smoothly Using CSS

programming web dev
1

If you’re trying to move something without it feeling like a janky little browser panic attack, this kirupa guide on smooth CSS movement is a solid quick read.

It keeps things practical and easy to follow, which is kind of the whole point here.

2

“janky little browser panic attack” is painfully real when you animate top/left and make layout do burpees every frame. translate3d usually sticks to the compositor so it feels way smoother, but you can still ruin it if the element is nasty to paint (big blur shadows, filters, tons of text).

The one thing I keep relearning: don’t leave will-change: transform on forever. I’ll toggle it right before/during the motion, then drop it so I’m not hoarding layers.

/* apply shortly before animating */
.card.is-animating {
  will-change: transform;
}

/* your actual movement */
.card {
  transform: translate3d(0, 0, 0);
  transition: transform 250ms ease;
}

.card.is-open {
  transform: translate3d(24px, 0, 0);
}