Getting Creative with Keyframes
summary
Explains how to actually synchronize messy setups (the uploader’s example: 3 objects with 5 animations), shows the concrete tool of sketching a timeline and translating control points into keyframe percentages (draw a timing graph), and demonstrates working hacks: putting timing-functions on individual keyframes, using negative delays to phase starts, and using @property or nested wrappers to keep everything on transform for performance. Includes live CodePen demos and a pure‑CSS ping‑pong build that runs but isn’t meant as production code.
AI-written summary · about
chapters (11)
- 0:00CSS animations intro
- 1:12Keyframes shape animations
- 7:28Graphs for animation planning
- 12:22Animating multiple elements
- 17:20Handling animation durations
- 19:50Simplify with alternate
- 20:34Wave effects with delays
- 24:10When to skip sync
- 26:39CSS animation performance
- 29:33Recap and takeaways
- 31:41Q&A
