CSS Animation: De-animating the Undead Horde

You’ll learn how to trigger a simple transition and then how to create a longer, more complex movement or color change and more using keyframes, easing functions, delays, durations and much more.

You’ll also keep your page running smoothly by learning the most performant ways to animate your page with transformations.

But what if you have a client with a sensitivity to motion or someone who would simply prefer no or very little motion? Well we can meet those concerns with the prefers-reduced-motion media query.

Best of all we’ll take a look at the tried and true twelve principle of animation as set out by some legendary Disney animators. We’ll apply those principles to the web, looking both at how those principles might apply to character animation on the web, but also how they apply to UI animation.

So take those static zombie poking sites and turn them into zombie smacking tanks of human ingenuity.

How You'll Learn to Smack Zombies Around

You won't just passively take in the view, like a zombie shuffling across the mainland. You’ll have plenty of combat practice with analogies, examples, and code tutorials you can build, break and fix again. Working with your hands and your head you’ll craft code that pleases the eye and knocks a zombie into last Tuesday.

All the code and directions are provided as both codepen tutorials and downloadable html files, so you can fight the apocalypse how and where you like. You can work with them on the codepen site or on your own device.

And later you'll bring those skills together in a final project that cements those skills into zombie smashing muscle memory.

Why Zombies?

Are zombies just a gimmick? Why would this be any better than a straight laced book that sticks to the facts?

Straight laced books are often straight boring. And if you have insomnia problems go buy that book. The author, John, has read the boring books and knows that staying awake and engaged are also important for learning. But this book uses zombie references and analogies not just to make you smile, but to help the material stick. If a tough technical concept is related in silly terms you understand, like a zombie trying to buy gum at a super market, it’s much more likely to stay in that brain those zombies are intent on eating.