CSS animation Today (2021 Edition)
summary
Shows concrete CSS techniques with working demos and compatibility notes: uses a single background property with multiple gradients painted and animated by background-position/size (gradients themselves change discretely), builds organic blobs with the extended border-radius syntax (adjacent radii sums ≈100% for smoothness), animates shapes via clip-path only when using the same function and equal point counts, and applies mask-image, prefixed text-stroke, animatable text-shadow, and CSS 3D with perspective/transform-style. Live examples and Can I Use screenshots are provided.
AI-written summary · about
chapters (11)
- 0:00Introduction to CSS animation
- 3:21CSS background animations
- 8:00Border radius and blobs
- 11:14Background clip and masking
- 13:20Clip-path techniques
- 15:57Mask image and typography
- 17:01Text stroke and shadows
- 19:163D transforms in CSS
- 22:36Transitions for interfaces
- 24:01Performance and CSS triggers
- 25:04Conclusion and Q&A
