Newton meets CSS
summary
Shows exact CSS to make sprite animation by combining a 5000px-wide sprite sheet with a 550×300 window, animating background-position with steps(12) and recommending at least 10 fps (use 1s duration) so the kangaroo reads as real. Demonstrates using cubic-bezier() curves to model gravity (use g≈10 m/s² intuition), overshoot values >1 or negative y to get bounces, and squash/stretch on impact; the examples are implemented in CSS and visibly work as described.
AI-written summary · about
chapters (29)
- 0:00Intro
- 1:06Web Design & Timing Animations
- 1:25Itinerary
- 2:12Working with frames
- 3:43@keyframes
- 4:06Basic Animation Example
- 5:19More Keyframes
- 6:26Steps Example
- 7:47Jules Marey
- 8:17Eadweard Muybride
- 12:35Steps() Example with Transition
- 15:22Speed
- 16:44The Gravity of Earth
- 17:26Gravity acceleration
- 20:05And threw a Watermelon and a Pizza
- 20:48The Elephant and the Feather
- 21:27Frames with linear easing
- 21:39Emulate free-fall
- 21:49Frames Vertical
- 22:23Newton's 3rd Law
- 22:39Squash and Stretch
- 22:49rd Newton's Law
- 23:18Bézier Curves
- 23:30The Bézier Curve
- 26:462. One value out of range
- 28:07Two values out of range
- 28:25Negative values
- 30:05Positive out of range + Negative
- 30:56Recap
