CSS in the 4th Dimension
summary
Covers concrete recipes and demos: sequences layered transitions so width finishes before height, a lightbox and overlay built with only box-shadow and no extra elements, frame‑by‑frame sprite animation using steps timing for sprites, image crossfades using the new crossfade image function (noted as implemented in Chrome since April 2012) and CSS state kept via delayed transitions. Notes practical compatibility: transitions reach ~80% of users, unprefixed transitions ~60% and unprefixed animations ~25%. Also shows how to grace‑fully degrade. sequence width then height CSS only lightbox
AI-written summary · about
chapters (18)
- 0:00Introduction
- 7:26Browser support
- 14:48Transition effect
- 15:20Height Auto
- 16:06Intermediate States
- 17:48Gradients
- 18:23Animations
- 19:14Transforms
- 21:55Chrome
- 22:23CSS Transitions
- 23:52CSS Buttons
- 24:08Cubic Bezier
- 26:52Transitions Limitations
- 27:59Basic Animation
- 30:11Smooth Animation
- 33:40Border Style
- 42:56Wrapup
- 43:24Reality Check
