CSS Animation: De-animating the Undead Horde

Nothing takes down zombies like an HTML element on the move. This book takes a look at transitions, transformations and animations in CSS. 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. What You'll Beat Zombies with Besides learning how to punch a zombie in the HTML5, you'll learn the major HTML elements that make up a modern web page and how to put them to good use. You'll learn the structural underpinnings of a web page, how to markup text, how to wrangle attributes, and ways to embed images, audio, and video. By the time you're done you'll understand HTML, know how to build your own web page, and pawn zombies with your skills.

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 code pen tutorials and downloadable html files, so you can fight the apocalypse how and where you like. You can work with them on the code pen 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 supermarket, it's much more likely to stay in that brain those zombies are intent on eating.