Excerpt – CSS Animation: De-animating the Undead Horde

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, the easiest choice is a mouseover or hover effect. The effect is easily triggered and can be triggered as often as you like to make sure it’s working properly and/or taking zombies out at the rate you anticipated.

.zombie { 
    background-color: yellowgreen;
}Code language: CSS (css)

.zombie:hover { 
    background-color: darkred; 
    transition: 2s;
}Code language: CSS (css)

You can use a checkbox input element and the checked pseudo-class if you are working on a mobile device, or even on a desktop if you prefer this method. When you want to initiate the transition, just tap/click the checkbox.

.zombie { 
    background-color: yellowgreen;
}Code language: CSS (css)

.toggle-checkbox:checked + .zombie { 
    background-color: darkred; 
    transition: 2s;
}Code language: CSS (css)

Note: to transition from the hover state back to the original put a transition on the original selector. It can be the same as or different from the original to hover transition.

Night of the Living Tip:

For simple transitions the adjacent operator (+) is a great choice. As we get more complex the need for additional elements makes putting the checkbox directly next to the element you want to transition/animate harder and harder. So as we go you can use the sibling operator (~) to create this same trigger. The only requirement would be that the checkbox is before the animated element in the HTML and either a sibling or an aunt/uncle (including any flavor of great aunt/uncle) of the element you wish to animate.

You can also transition some properties without transitioning all properties.

.zombie {
    background-color: yellowgreen;
    color: black;
}Code language: CSS (css)

.zombie:hover, .toggle-checkbox:checked + .zombie { 
    background-color: darkred;
    color: white; 
    transition: 2s background-color;
}Code language: CSS (css)

You can also transition properties separately.

.zombie {
    background-color: yellowgreen;
    color: black;
}Code language: CSS (css)

.zombie:hover, .toggle-checkbox:checked + .zombie {
    background-color: darkred;
    color: white;
    transition: 2s background-color, 3s color;
}Code language: CSS (css)

Night of the Living Tip:

Transition is the shorthand property for setting several things at once. You can also set the property to be transitioned directly with transition-property, set the length of time with transition-duration, set a delay for how long to wait before the transition starts with transition-delay, and set a timing function with transition-timing-function (we’ll talk about timing functions in detail later, when we get to the animation property).

Pick up CSS Animation: De-animating the Undead Horde from your favorite retailer.