CSS Animation

As you have learned already, animation is the practice of using successive drawings to create the illusion of movement. A simple way to achieve this in your web design is by using CSS. When you animate using CSS, you are creating a transition between one CSS style to another instead of one drawing to another. You can change the position, color, size, borders, or other properties to create that same illusion of movement.

Exploring Keyframes

To start creating animations with CSS, we have to start by explaining keyframes.

Keyframe
a point that defines the start and end of a smooth transition

Keyframes are referred to as frames because when animating for traditional entertainment they are measured on strips of film. The change between a series of keyframes is what creates the illusion of movement. We can use the @keyframes rule in CSS to create animations for the web. Instead of changing from one image to another, you can change from one set of CSS styles to another.

When creating a @keyframes rule, there are a few things you must include.

  • A name: This is how you will invoke the animation later on.
  • A starting point: This is what your object will look like at the beginning. You can define it with either "from" or "0%."
  • An ending point: This is what your object will look like at the end of the animation. You can define it with either "to" or "100%."

The following example shows a very simple use of keyframes, with only this start and end state. Notice how the object changed; visually, it went from a square to a circle, but if you look at the @keyframes rule, you can see the transition from one CSS property of border-radius: 0% to another, border-radius: 50%.

See the Pen Keyframes by Kendall (@kalake96) on CodePen.

This Codepen demonstrates an @keyframes animation with just two frames.

Of course, more complex animations are going to involve more than just two frames. You can use percentages to define even more frames. Just make sure you include a start (0%) and an end (100%), and then you can create however many stopping points you want along the way. The example below includes two additional keyframes beyond the start and the end. This time, in addition to altering a simple visual property like color, the transition between different positions also creates movement.

See the Pen Keyframes 2 by Kendall (@kalake96) on CodePen.

This Codepen demonstrates an @keyframes animation with multiple frames.

But after you create a @keyframe, how do you tell the animation to run and for how long?

Animation Properties

In the CSS for the object/div you want to animate, you can use a variety of animation-related properties to tell your animation what to do. You should always specify the name and the duration of the animation, or it will never play. Here's a few more details about each of the properties...

  • animation-name: Surprise, surprise, this property invokes the animation.
  • animation-duration: Specifies how long the animation takes to run. Can be in seconds (s) or milliseconds (ms)
  • animation-timing-function: Describes the speed curve of the animation. The default here is "ease," but you can also set other values.
  • animation-delay: Specifies whether the animation waits to start.
  • animation-iteration-count: How many times the animation should play. The default is 1, but you can set any value, including infinite.
  • animation-direction: Specifies whether the animation should play forwards or in reverse.
  • animation-fill-mode: Describes whether the animation keeps the style values set by the first or last keyframe.
  • animation-play-state: Whether the animation is paused or running. This becomes important with animations you want to start and stop.

Anatomy of the Animation Shorthand

Once you get the hang of it, listing all those properties can get tedious. But don't worry, there's also a shorthand that can make writing complex animations a much more efficient process:

animation: subway 2s linear 1s infinite forwards

After understanding the order, combining all of these animation properties is simple. You don't need to change each value every time, but always make sure you specify the animation name and the duration or nothing will play.

Application Activity

Time to put things into action. Here are a couple of ideas for how you can use your new skills to get them to stick:

  1. Create a two-keyframe animation where your name moves from one side of the page to the other, then stops.
  2. Extend that animation by testing different kinds of timing functions. What happens if you try linear, ease, or step-start? Experiment with some different values.
  3. Create an animation where an object changes through every color of the rainbow, then keeps repeating.

Feeling stuck? Here are a few outside resources that may provide more information...