Learn CSS Animations in 5 Minutes

In this article, I'll give you a whistle-stop tour of CSS animations. While this won't be enough to learn the topic in depth, it will give you a solid overview of some of the most important aspects such as:

• Transitions
• Animations
• Effects
• Tips and tricks

If you want to learn more about CSS animations after reading this article, I recommend you check out the Learn CSS Animations course over at Scrimba, which delves deeper into the topics covered here and gives you a chance to put your new skills to the test with a series of challenges.

Now, though, let's get stuck into the basics!

Transitions

Click the image to access the course.

Transitions allow an element's properties to change smoothly and gradually instead of instantly chopping to something new. Creating transitions is a two-step process:

First, we add the hover effect using the :hover pseudo-class. For example, if we want our heading to change style when hovered, we add hover to the .heading selector:

.heading:hover {
    color: brown;
    font-size: 25px;
}

Next, we add the transition property to the base selector. The first part of the value is the property we want to transition. The second part is the time it should take to transition in seconds. Multiple properties can be targeted by separating them with a comma:

.heading {
    color: darkblue;
    font-size: 15px;
    transition: color 0.5s, font-size 1s;
}

It is also possible to customize transitions with delays and specific timing functions. Head over to Scrimba to find out more and practice your new skills with a CSS transitions challenge.

Animations

Click the image to access the course.

Animations allow you to change an element's appearance without interaction from the end user. Unlike transitions, they can have more than two stages, which makes them much more powerful.

We define an animation with the @keyframes rule. For a two-step animation, we use the from and to keywords:

@keyframes grow {
    from {
        width: 50px;
        height: 50px;
        background: red;
    }
    to {
        width: 50px;
        height: 100px;
        background: green;
    }
}

For animations with three or more steps, we use percentages to specify at which stage of the animation we want the element to change:

@keyframes grow {
    0% {
        width: 50px;
        height: 50px;
        background: red;
    }
    50% {
        width: 100px;
        height: 50px;
        background: blue;
    }
    100% {
        width: 100px;
        height: 100px;
        background: green;
    }
}

Note: To ensure a smooth animation and be certain that no steps are missing, all the changing properties should be included throughout each step.

Now we have set up the animation, it's time to run it by adding the animation-name and animation-duration properties to the base selector of the element we want to animate:

.box {
    animation-name: first-animation;
    animation-duration: 1s;
}

Animations can also be customized with other optional properties such as animation-delay, animation-iteration-count, animation-timing-function, animation-direction and animation-fill-mode. Head on over to the course to find out more about these and the animation shorthand property, which is a handy, code-shortening tip!

Effects

Click the image to access the course.

This section looks at some of the effects and CSS tricks we can use to enhance our animations.

• Scale: This effect changes the size of an element along the x-axis, the y-axis, or both:

@keyframes transform {
    100% {
        transform: scaleX(2) scaleY(0.5);
    }
}

Note: The shorthand for the above is:

@keyframes transform {
    100% {
        transform: scale(2, 0.5);
    }
}

• Translation: With this effect, we can move our element from one place to another across the x-axis, the y-axis or both:

@keyframes transform {
    100% {
        transform: translate(10px, 50px);
    }
}

• Rotation: This effect allows us to turn an element by a specified number of degrees:

@keyframes transform {
    100% {
        transform: rotate(90deg);
    }
}

• Skew: The skew effect is similar to rotate, but rather than moving an element clockwise or anticlockwise, it moves it sideways, up or down:

@keyframes transform {
    100% {
        transform: skew(0deg, 50deg);
    }
}

To use these effects, we add them to an animation as above and then add the animation to our element's base selector in the normal way:

.box {
    animation-name: transform;
    animation-duration: 2s;
}

Tips and Tricks

This section looks at some handy tips and tricks for using CSS animations:

- Prefixes: Some old browsers require a prefix to use these effects successfully:

animation: size-down ease-out 0.5s infinite alternate both;
-webkit-animation: size-down ease-out 0.5s infinite alternate both;
-ms-animation: size-down ease-out 0.5s infinite alternate both;
-moz-animation: size-down ease-out 0.5s infinite alternate both;
-o-animation: size-down ease-out 0.5s infinite alternate both;

To ensure maximum browser compatibility, you may also need to use a fallback property.

- CSS Variables: These are a way of storing values in a placeholder which can then be used multiple times throughout the stylesheet, making it easier to use and update. Variables are defined like this:

:root {
    --box-unit: 50px;
}

And used like this:

.box {
    width: var(--box-unit);
    height: var(--box-unit);
}

- Custom Timing Functions: Cubic Bezier functions allow us to add further customization to the timing of our transitions and animations by specifying the speed of the animation at different points during its progression. This can be visualized in the graphs at this link.

Cubic Bezier functions are defined as follows, where the first two values are the starting x and y-axis positions on the graph and the third and fourth values are the end position:

transition-timing-function: cubic-bezier(0.62, 0.15, 0.4, 0.9);

That's all for our five-minute tour of CSS animations. I hope you learned a lot and have been inspired to check out the full course over at Scrimba!

Happy coding :)