Animation

An introduction to CSS3 animations.

Our brain is wired in such a way that moving objects grab our attention. Because of this, adding animations is a great way to keep users engaged and highlight areas of importance within our projects.

Animations are powerful. We can add them to almost any element within our markup. Our animations can perform simple tasks like adjusting the background or text color when a user hovers over an element or more complex tasks like recreating the solar system with just CSS.

Let's go through a step-by-step walkthrough of how to create and use animations

1

Create the @keyframes

The first step is to create our @keyframes. The @keyframes rule allows us to style our element differently at certain times throughout it's animation.

Styles defined through @keyframes are applied gradually throughout the entirety of the animation.

2

Create the animation

Next, let's add our animation properties.

We can do this by either writing long or shorthand code.

I prefer shorthand because of how compact it is. The drawback with using shorthand is that you may not remember all of the animation properties. Animation properties can be a tad confusing. In the section below I have created a resource that can be useful when trying to figure out exactly what these properties do.

Animation properties

  • animation-direction

    Defines the direction the animation should be played.

  • animation-duration

    Defines how long it should take the animation to complete one cycle.

  • animation-fillmode

    Defines a style for the animation when it is not playing.

  • animation-delay

    Defines a delay until the animation starts.

  • animation-iteration-count

    Defines how many cycles the animation will play.

  • animation-name

    Specifies the name of the @keyframe animation.

  • animation-play-state

    Defines whether or not the animation is paused or running.

  • animation-timing-function

    Defines the speed curve of the animation.

3

Add the animation

This last and final step is to put the animation into your markup.

You have the option of putting the animation directly into your styled class, or creating a modular animation that can be applied to multiple elements.

Now that we understand the basics of animations, let's take a look at a few examples and see some of the things we can do with them.

Example I

This example demonstrates how background, border-radius, and transform: rotate work within @keyframes.

Example II

This particular animation rotates, moves to the right and changes colors throughout it's @keyframes. The animated and styled square also has an opacity on it, allowing you to see through it.

This animation also uses from and to values. These values are the same as 0% and 100%, respectively.

Example III

This particular animation involves numerous elements, all of which are associated with different animations and @keyframes.

The orbs share a very similar animation. The biggest drifference is the positiong in which they actually get moved and their animation-duration.

This example shows you how different items can be styled to move at different times. This is a fairly basic example, imagine the possibilities of numerous styles within your @keyframes.

Scalable Vector Graphics

Perhaps one of the coolest things about animations is our ability to manipulate Scalable Vector Graphics or SVGs.

Opening an SVG file in a text editor displays it's code. In turn, the path within the code can be styled or have animations applied to it.

In this example, our SVG turtle has a few basic animations applied to it. First, there is an animation applied to the entire SVG that changes the opacity, scale and rotateY.