Animation

Animation comparisons

8 old vs modern animation CSS techniques, side by side.

Animation
Intermediate

Sticky & snapped element styling without JavaScript

Modern @container scroll-state(
  stuck: top
) {
  .header { ... }
}
Old window.addEventListener(
  'scroll', () => {
    /* check position */
});
hover to see old →
Animation
Advanced

Responsive clip paths without SVG

Modern .shape {
  clip-path: shape(
    from 0% 100%, ...
  );
}
Old .shape {
  clip-path: path(
    'M0 200 L100 0...'
  );
}
hover to see old →
Animation
Intermediate

Staggered animations without nth-child hacks

Modern li {
  transition-delay:
    calc(0.1s * (sibling-index() - 1));
}
Old li:nth-child(1) { --i: 0; }
li:nth-child(2) { --i: 1; }
li:nth-child(3) { --i: 2; }
/* repeat for every item… */
hover to see old →
Animation
Beginner

Independent transforms without the shorthand

Modern .icon {
  translate: 10px 0;
  rotate: 45deg;
  scale: 1.2;
}
/* animate any one without touching the rest */
Old .icon { transform: translateX(10px) rotate(45deg) scale(1.2); }
/* change one = rewrite all */
hover to see old →
Animation
Intermediate

Animating display none without workarounds

Modern .panel { transition: opacity .2s, overlay .2s;
  transition-behavior: allow-discrete; }
.panel.hidden { opacity: 0; display: none; }
/* no JS wait or visibility hack */
Old // wait for transitionend then display:none
el.addEventListener('transitionend', …)
visibility + opacity + pointer-events
hover to see old →
Animation
Intermediate

Entry animations without JavaScript timing

Modern .card { transition: opacity .3s, transform .3s; }
.card { @starting-style { opacity: 0; transform: translateY(10px); } }
/* no rAF/setTimeout */
Old // add class after paint
requestAnimationFrame(() => {
  el.classList.add('visible');
});
hover to see old →
Animation
Advanced

Page transitions without a framework

Modern document.startViewTransition(() => updateDOM());
.hero { view-transition-name: hero; }
/* no Barba, no React TG */
Old // Barba.js or React Transition Group
Barba.init({ … })
transition hooks + duration state
hover to see old →
Animation
Advanced

Scroll-linked animations without a library

Modern animation-timeline: view();
animation-range: entry;
/* pure CSS, GPU-accelerated */
Old // JS + IntersectionObserver
observer.observe(el)
el.style.opacity = …
hover to see old →

Other categories

Layout 20 snippets Color 5 snippets Selector 5 snippets Typography 7 snippets Workflow 11 snippets
ESC