Disney’s 12 Basic Principles Of Animation – Done in CSS
summary
Recreates Disney’s 12 principles purely with CSS keyframes, transforms, gradients and filters, no JavaScript, showing working demos: a jumping cube that uses slow in slow out timing, keyframe stops for squash and stretch, matching shadow scale and opacity, staging via gradients and blurred floor shadow, follow‑through/overlap with offset keyframes, anticipation through active state scaling (snow button) and a working Pixar‑lamp demo. All effects are implemented in CSS and visibly work in the live examples.
AI-written summary · about
chapters (10)
- 0:00Introduction to Disney principles
- 2:14Straight ahead vs pose to pose
- 4:00Slow in slow out demo
- 7:13Squash and stretch principle
- 10:08Appearance and staging
- 13:43Follow through and overlapping action
- 16:57Secondary action
- 19:33Arc and exaggeration
- 20:57Anticipation in motion
- 23:51Summary and Q&A
