CSS Animation: De-animating the Undead Horde: Undead Institute

By John Rhea

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.
 

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.

• Language: English
• Publisher: John Rhea
• Release date: Aug 1, 2020
• ISBN: 9781393434672

Book preview

Four Word

Making Magic, Zombie Moves

Get a Free Zombie Animation CSS Cheat Sheet

Zombie CSS Cheat Sheet

When you sign up for Webpocalypse Weekly, our email newsletter. This printable cheat sheet covers animations, transitions and transformations. Reference your new CSS skills with your very own CSS Animation Cheatsheet

https://undd.link/animation

What is Animation and Why

Animation, for the purposes of this book, is the change of CSS declaration values over time—and/or punching a zombie in the corpus callosum. Just like the corpus callosum, animation bridges the gap between artistic and technical skills.

Animation can take many forms, from character animation to interface animation, from visual movement to color change. You can animate just about any CSS property that has a mathematical representation, but how fast or slow that happens or whether your ballistic elements go in a straight line or arc gracefully into the zombie horde is an art form unto itself.

The best web animations enhance a user’s experience of the website, rather than solely providing a cool factor or pushing the technology. (I take that back. The very best animations do or build toward all three.) That said, if the addition of animation ever deteriorates the user experience or adds frustration, then you need to either remove it entirely or remove the deleterious effect. Even if it’s awesome, if it annoys users, it’s not worth including.

Necessary Zombie-Smacking Skills

This book assumes a rudimentary knowledge of HTML and CSS. If you don't have that yet, many wonderful, though zombie-less, tutorials are available online, or you can pick up a copy of A Beginners Guide to Learning HTML (or How to Smack a Zombie Upside the Web Development) and/or Beginner CSS: Like Putting Lipstick on a Zombie.

Roadmap to the Resistance

There are a few skills needed to build animations/stop those dead from being reanimated. We’ll look at transitions, transforms and keyframes before we get to the animations themselves. So if it feels like we’re taking a left turn into the urban wilds of zombie territory, don’t worry we’ll bring it all together by the end.

Transitioning to Zombiehood

The place to start in CSS animation is with transitions. A zombie infection transitions a property from one state (human) to a second state (zombie). In CSS, transitions can generally animate any mathematical value, such as a width or even a color.

The easiest way to start working with animations/transitions is to have a clear trigger for when the animation/transition starts and stops. When working on a desktop,