CSS Animation - Beyond Transitions
summary
Shows how pure CSS + SVG build real animations: sprite-style flight using 10 frames and background-position with animation-timing and negative delays, looping birds offset by varied durations; draw-in effects with stroke-dasharray / stroke-dashoffset to animate outlines; motion tuned with transform-origin, cubic-bezier, will-change and animation-steps() for stepping frames; examples include a scrolling mouse, flying birds, pulsating heart and a bounce choreographed with scale and timed keyframe stops.
AI-written summary · about
chapters (12)
- 0:00Introduction to speaker
- 0:52Why use animation
- 2:00CSS animation performance
- 2:42Beyond CSS transitions
- 4:38The power of keyframes
- 5:30Animating SVG elements
- 8:08Step-based frame animation
- 11:59Complex motion paths
- 14:41Interactive SVG animation
- 19:24Stroke dash animation
- 22:42Storyboarding and polish
- 27:02Conclusion
related talks
33mAnimation Studio Power Techniques with CSS
38mCSS in motion: Animations for fun and profit
09mABC of CSS3 animations
38mAdvanced animation with CSS in HTML and SVG to improve UX
26mCSS animation Today (2021 Edition)
52mCSS and SVG — The Dynamic Duo!
26mCSS like a single animation
44mPractical Web Animation