Stick, Stick, Cucumber: Drawing Character Animation in CSS

on YouTube ↗01h 56m

" summary

Shows how to recreate a looping Viking character animation entirely in CSS by slicing a GIF and redrawing key frames as shapes (no images). Uses a GIF splitter and Chrome PixelPerfect to reduce 72 frames to 24, selects key frames (6, 12, 19, 24) and interpolates between them, then builds the character from many absolutely positioned divs and ::before/::after pseudo-elements using gradients, border-radius, transform-origin and keyframe animations to keep the full cycle around 1 second; code and assets are provided.

AI-written summary · about

" chapters (10)

1. 0:00Introduction
2. 1:48Setup tools
3. 5:13Split GIF into frames
4. 13:19HTML structure
5. 20:56Viking drawing layers
6. 1:03:10Break
7. 1:05:54Detail drawing
8. 1:36:12Keyframe animation
9. 1:50:07Final animation tweaks
10. 1:53:31Use cases

" related talks

• 33mAnimation Studio Power Techniques with CSSRachel Nabors · CSSConf EU 2013
• 28mCSS Animation - Beyond TransitionsSteven Roberts · CSSConf Budapest 2019
• 49mSVG in motionSara Soueidan · ffconf 2015
• 36mInteractive Web Animation with SVGCassie Evans · beyond tellerrand Berlin 2019
• 18mAnimations — Learning from CartoonsMartin Sonnenholzer · JSConf EU 2019
• 38mCSS in motion: Animations for fun and profitMartine Dowden · NDC Oslo 2022
• 44mPractical Web AnimationLisi Linhart · Pixel Pioneers Bristol 2019
• 43mDesigning Meaningful AnimationVal Head · beyond tellerrand // DÜSSELDORF 2016