Animation Studio Power Techniques with CSS
summary
Demonstrates concrete techniques and working code: CSS keyframes and a steps timing function to create a sprite-based walk cycle (12 discrete steps, 1s loop) that runs in Chrome and recent browsers while noting IE10/11 quirks; uses layered sprites and cutouts to toggle facial expressions, builds a looping music-video prototype with a tuna character, fakes an iris wipe by animating a scaled background, and implements a multiplane-style parallax BG 40s infinite; mentions prefixfree and a Compass/Sass Animation Studio helper.
AI-written summary · about
chapters (8)
- 0:00Start
- 4:02STORYBOARDS
- 8:50WALKCYCLES WITH CSS
- 12:21CUT OUTS
- 15:28CUT-OUTS WITH CSS
- 27:24CUSHIONING, EASING_TIMING FUNCTIONS
- 30:16WHY ANMATING IN THE BROWSER KICKS ASS
- 31:42Alice in Videoland
related talks
28mCSS Animation - Beyond Transitions
01h 56mStick, Stick, Cucumber: Drawing Character Animation in CSS
38mCSS in motion: Animations for fun and profit
28mWeb Animation: from Disney to SASS
01h 00mAnimating Web Experiences
44mPractical Web Animation
09mABC of CSS3 animations
43mDesigning Meaningful Animation