Building Custom Animations

Length: 16 minutes

This tutorial takes an introductory look at the mechanics of creating CSS animations. This tutorial assumes you already have a basic knowledge of HTML and CSS. If you do not already know HTML and CSS, first take my course on Building Responsive Websites as a primer.

CSS Animation Properties

Let's take a look a these provided CSS properties:

animation-name: <name>

The animation-name property specifies a list of animations that should be applied to the selected element. Each name indicates a @keyframes at-rule that defines the property values for the animation sequence.

animation-duration: 1s | 100ms

The animation-duration property specifies the length of time that an animation should take to complete one cycle.

The animation-timing-function property specifies how a CSS animation should progress over the duration of each cycle.

animation-delay: 1s | 100ms

The animation-delay property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.

animation-direction: normal | reverse | alternate | alternate-reverse

The animation-direction property indicates whether the animation should play in reverse on alternate cycles.

animation-iteration-count: 1 | infinite

The animation-iteration-count property defines the number of times an animation cycle should be played before stopping.

animation-fill-mode: none | forwards | backwards | both

The animation-fill-mode property specifies how a CSS animation should apply styles to its target before and after it is executing.

animation-play-state: running | paused

The animation-play-state property determines whether an animation is running or paused. This can be queried to determine whether or not the animation is currently running. Additionally it could be altered using CSS psuedo class selectors such as :hover, or via JavaScript.

animation: <name> 1s ease 0 alternate infinite none running;

The animation property is a shorthand for combining all of the properties above in a single CSS rule.

Creating Keyframes

Key frames allow us to create specific moments within the animation timeline to make style adjustments to the animated element. Changes between the styles of two key frames will transition (tween) cross-fading between the two styles.

Let's take a look at some sample code and discuss further,

<div class="element">hello I'm an element to be animated.</div>

Here we created an HTML element and gave it a generic class of element in order to apply an animation. Now to apply the animation and keyframes:

.element {
  animation: fade 1s infinite;
}

@keyframes fade {
  0%     { background: red;  }
  100% { background: blue; }
}

On line 1 we select the class of element. On line 2 we use the animation property setting its first value as fade the name we have chosen to call our animation sequence. Then we specify the animation-duration of 1s or one second. Next we set the animation-iteration-count to infinite so that our animation loops continuously. Moving on to line 5 we use @keyframes to define our keyframe sequence. Following we give the same name as our animation fade thus tying the two together. Inside the { } curly braces of our keyframe sequence we use percentage measurements to represent positions along the timeline of the "fade" animation. Here on line 6 0% represents the start of the animation and on line 7 100% represents the end of the animation. These two lines act as individual keyframes that include their own instructions within their respective set of { } curly braces. Changing from the background color from red at the beginning animation and ending at blue after 1s one second that was previously set as the animation-duration above.

hello I'm an element to be animated.

In addition to percentage values, keyframe sequences also accept from and to reffering to the start and end of the animation timeline.

.element {
  animation: fade 1s infinite;
}

@keyframes fade {
  from { background: red;  } to { background: blue; }
}

What CSS Properties Can Be Animated

Not all CSS properties can be smoothly animated. Some properties do not have the ability to to adjust gradually between states. The full list of CSS properties that can be animated is listed at MDN - CSS Animated Properties

Performance

Some CSS properties will definitely achieve smooth 60 fps (frames per second) animations in all browsers. The following are properties that have shown good performance in all supporting browsers.

transform: translate(npx, npx);

transform: scale(n);

transform: rotate(ndeg);

opacity: 0..1;

Browser Support

To get the current browser support you will have to check based on your specific use cases in terms of which animation properties you are using in whether you are animating traditional DOM elements or SVGs. At the time of creating these slides global support for animation features are at 92%. To see the most up to date, check out: CanIUse.com

To support older browsers you can link to JavaScript poly-fills such as the ones provided with Modernizr:

Visit this link and click the plus button to include poly-fills for CSS animations.
Then click the build button and download the JS file and move it into your project.
Link to the file inside your pages <head> section like so:<script src="modernizr-custom.js”></script>

Putting it all together

Now follow along coding with me as we create our own custom CSS animation using what we have learned above. You can build this using an online scratch pad such as CodePen or JSFiddle. Or by creating your own index.html and CSS pages.

Let's start out by creating the HTML for a ball using a div element and giving it the class of ball.

<div class="ball"></div>

Next, let's write some CSS to make our ball appear

.ball {
  background: gray;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
}

Now let's write our animation using the CSS animation property.

.ball {
  background: gray;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  animation: bounce 1s infinite alternate;
}

Then we will write the CSS for our keyframes,

@keyframes bounce {
  from { bottom: 0% } to { bottom: calc(100% - 100px) }
}

We are using the calc( ) function to calculate the math for the top point of the animation on the fly. This will be 100% from the bottom minus the height of the ball.

Now our ball is bouncing great! Next, let's add an additional animation to our ball called fade.

.ball {
  background: gray;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  animation: 
    bounce 1s infinite alternate,
    fade 10s infinite;
}

As you can see on line 9 we have added an additional animation by separating the two with a , comma. Then we can write our keyframes for fade.

@keyframes fade {
  0%   { background: red;    }
  14%  { background: orange; }
  29%  { background: yellow; }
  43%  { background: green;  }
  57%  { background: blue;   }
  71%  { background: indigo; }
  86%  { background: purple; }
  100% { background: red;    }
}

In the code above we divided 100 (the percent of our full timeline) by 7 the number of colors we wish to fade between. This gave us the value 14.28 the amount to separate each of the seven keyframes by.

This looks good. Now I would like to duplicate to create more bouncing fading balls. We'll copy this logic in our HTML giving each its own class such as b1 through b5:

<div class="ball b1"></div>
<div class="ball b2"></div>
<div class="ball b3"></div>
<div class="ball b4"></div>
<div class="ball b5"></div>

The we'll write the classes and shift the across the screen,

.b1 { left: calc(0% - 50px); }
.b2 { left: calc(25% - 50px); }
.b3 { left: calc(50% - 50px);  }
.b4 { left: calc(75% - 50px);  }
.b5 { left: calc(100% - 50px);  }

Here we used calc( ) again. to offset the left position of each ball by half it's width. Next we will include an animation-delay to make each bounce out of phase with each other.

.b1 { left: calc(0% - 50px); animation-delay: 0; }
.b2 { left: calc(25% - 50px); animation-delay: 100ms; }
.b3 { left: calc(50% - 50px); animation-delay: 200ms; }
.b4 { left: calc(75% - 50px); animation-delay: 300ms; }
.b5 { left: calc(100% - 50px); animation-delay: 400ms; }

Looking better! Finally, let's give the body a black background color to make it pop even more.

body { background: black; }

Here is the finished code example as well as all the final code below:

<div class="ball b1"></div>
<div class="ball b2"></div>
<div class="ball b3"></div>
<div class="ball b4"></div>
<div class="ball b5"></div>

body {
  background: black;
}

.ball {
  background: gray;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  animation: 
    bounce 1s infinite alternate,
    fade 10s infinite;
}

.b1 { left: calc(0% - 50px); animation-delay: 0; }
.b2 { left: calc(25% - 50px); animation-delay: 100ms; }
.b3 { left: calc(50% - 50px); animation-delay: 200ms; }
.b4 { left: calc(75% - 50px); animation-delay: 300ms; }
.b5 { left: calc(100% - 50px); animation-delay: 400ms; }

@keyframes fade {
  0%   { background: red;    }
  14%  { background: orange; }
  29%  { background: yellow; }
  43%  { background: green;  }
  57%  { background: blue;   }
  71%  { background: indigo; }
  86%  { background: purple; }
  100% { background: red;    }
}

@keyframes bounce {
  from { bottom: 0% } to { bottom: calc(100% - 100px) }
}

We hope you enjoyed this short course on building custom CSS animations. Check out more courses at the Courses link above!

Next Lesson

Course Info

	16 minutes of video
	1 code along exercises
	Slides
	Instructor: Jonathan Grover
	Free course

Please wait while we attempt to send your message!

Thank you for your question. We will contact you soon by email!

Ask Question

Use the form below to submit a question and we will get back to you via email shortly.

Twitter

Facebook

Code Pajamas

Introduction to CSS Animations