Animations & Transitions
summary
Timeline of CSS animation features and actual gotchas: transitions shorthand expands into four subproperties, negative delay jumps into animation and cubic-bezier plus steps control per-segment timing; keyframes support per-keyframe timing, iteration-count, direction and animation-fill-mode controls pre/post state. Browser inconsistencies matter — Firefox ignores unknown properties while Blink animates everything, pseudo-element events differ, and animations still need prefixes in some engines. Performance tests show CSS beats jQuery opening 200 boxes with roughly 0.5 MB extra memory when promoted to the GPU via translateZ(0).
AI-written summary · about
chapters (30)
- 0:00Start
- 0:15Css Animations and Transitions
- 1:30The History of Animation on the Web
- 2:45Dhtml
- 4:07Introduction to Animations and Transitions
- 5:09Transition Property
- 5:59Transition Duration
- 6:28Transition Delay
- 7:25Transition Timing Function
- 8:33The Cubic Bezier Function
- 12:23Multiple Transitions
- 16:24Animations
- 18:00Alternate Keywords
- 18:12Key Frames
- 19:36Animation Animation Property
- 19:54Animation Iteration Count
- 20:29Animation Timing Functions
- 21:05Animation Direction
- 21:43Reverse
- 23:17Animation Film Mode
- 25:07Animation Fill State
- 30:35Gradients
- 33:17Implicit Transitions
- 38:00Should I Use Javascript
- 38:32Comparing Css3 to Jquery
- 39:23Soft Skills
- 41:11Twelve Basic Principles of Animation
- 42:26Anime
- 42:55Future of Animations the Web Animation Specification
- 44:06Questions
