CSS in motion: Animations for fun and profit
summary
Explains when to use CSS transitions (state A→B) versus keyframe animations (repeats, complex motion), demos an accordion and an SVG loader, and shows how to make the loader stair-step with animation-delay and keyframes; solves height:auto by using scale or JS to measure height and cleaning up with the animationend event to apply display:none. Recommends cubic-bezier tools for timing, suggests 250–500ms for micro‑animations, and notes flashing must stay under three flashes per second and respect prefers-reduced-motion.
AI-written summary · about
chapters (9)
- 0:00Intro
- 2:07Why use a transition
- 5:13Hover transition example
- 11:57Accessibility
- 14:18Animations
- 16:18Keyframes
- 23:27CSS Accessibility
- 28:35CSS Motion
- 34:04Timing
