CSS Entry & Exit Animations with @starting-style
Animate elements as they enter and leave the DOM using @starting-style, transition-behavior allow-discrete, popovers and dialogs — no JavaScript animation library needed.
Filter/Tag
#css_10_batch2_maxmode
10 entries
-
-
Staggered & Sequenced CSS Animations — Delays, --index, and Choreography
Senior guide to choreographing CSS animations: staggering lists with custom-property delays, nth-child timing, sequencing multiple animations, and negative delays.
-
Accessible CSS Animation — Designing with prefers-reduced-motion
Senior guide to motion accessibility: the prefers-reduced-motion media query, opt-in vs global reset strategies, replacing motion with fades, matchMedia, and WCAG 2.3.3.
-
Animating CSS Custom Properties with @property — Typed Houdini Variables
Plain CSS variables cannot interpolate. Learn the @property at-rule to register typed custom properties and animate gradient angles, colors, and numbers smoothly.
-
Animating display and height:auto in CSS — allow-discrete & interpolate-size
Modern CSS finally animates display:none and height:auto. Learn transition-behavior allow-discrete, @starting-style, interpolate-size and calc-size with real examples.
-
CSS Animation Performance — The Compositor, will-change, and 60fps
Senior guide to fast CSS animations: the render pipeline, compositor-only properties, will-change tradeoffs, avoiding layout thrash, and DevTools measurement.
-
CSS Transforms for Animation — 2D, 3D, and the Compositor Win
Senior guide to animating CSS transforms: translate/scale/rotate, transform-origin, individual transform properties, 3D and perspective, and why transforms are cheap.
-
CSS Easing Functions — cubic-bezier(), steps(), and linear()
Senior guide to CSS easing: keyword easings, reading cubic-bezier curves, steps() for sprites, and the linear() function for springs and bounces.
-
CSS Transitions Deep Dive — Interpolation, allow-discrete, and the Gotchas
A senior guide to CSS transitions: the transition model, animatable properties, transition-behavior allow-discrete, transitioning display:none, and pitfalls.
-
CSS @keyframes & the animation Shorthand — A Senior Reference
Master CSS @keyframes and the animation shorthand: longhand properties, fill-mode, direction, iteration, multiple animations, and animation vs transition.