Fun and Flair with CSS3 Animations
summary
Covers concrete patterns you can copy: a focusable search box that transitions width 10em to 15em over 0.8–2s; a nav triangle moved by changing margin-left (values like 4.2, 10.2, 16.2) driven by a jQuery click handler; a CSS-only lightbox that sequences width then height using staggered transitions; keyframe recipes for springs and bounces with percent-keyframes, animation-fill-mode: forwards, iteration-count/infinite, 3D rotateY that requires perspective ~800, and background-position waves that loop.
AI-written summary · about
chapters (20)
- 0:00Start
- 4:13Kinds of Animations
- 5:55Transition Timing Function and Transition Delay
- 6:58Ten Secrets You May Not Know about Css
- 8:10Transitions
- 8:23Multiple Transitions on a Single Element
- 12:48Triangle with the Borders
- 13:28Transition
- 17:07Shifting Gears
- 17:38Keyframe Animation
- 18:40Timing
- 19:52Perspective
- 21:12Preserve 3d
- 22:16Infinite Animation Direction
- 22:48Fill Mode
- 26:29Rotation
- 28:17Bouncing Spring
- 28:37Visualization
- 32:20Media Queries
- 36:48Shoutouts
