How to Create Animations with CSS Keyframes

In addition to creating a CSS fade transition, you can also implement an encapsulated set of CSS rules called keyframes which illustrate animated changes over a mapped out timeframe.

Like regular CSS transitions, you can alter the appearance or position of any property within an element including width, height, background color, text size, or more advanced features like scaling, rotation angles, etc.

Let's start by creating a red box, this time replacing all transition properties with our animation and keyframe data:

div.box {
width: 100px;
height: 100px;
background-color: red;
cursor: pointer;
}

div.box:active {
-webkit-animation: my_animation 1.5s infinite;
-moz-animation: my_animation 1.5s infinite;
animation: my_animation 1.5s infinite;
}

@keyframes my_animation {
0% { opacity: 1.00; }
100% { opacity: 0.00; }
}

The result is similar in that the box still fades out as you hold the mouse button down over the element. However, we can now control the animation to do various things using keyframes. Like adding an infinite attribute to the animation property which instructs the box element to continue the CSS keyframe animation forever and reset it every 1.5 seconds. In this case, the animation will continue repeatedly until the user has lifted the mouse button from the box element.

Adding Multiple Transform Directives and Styling Properties to a Keyframe

Here's a more sophisticated example of a CSS keyframe animation where we control the scaling, rotation, and background color of the box with only one keyframe animation containing multiple transform directives and styling properties, and without any user interaction:

div.box {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation: my_animation 1.5s infinite;
-moz-animation: my_animation 1.5s infinite;
-o-animation: my_animation 1.5s infinite;
animation: my_animation 1.5s infinite;
}

@keyframes my_animation {
35% {
background-color: red;
transform:
scale(1.5)
rotate(90deg);
}
70% {
background-color: green;
transform:
scale(1.25)
rotate(45deg);
}
100% {
background-color: blue;
transform:
scale(1)
rotate(0deg);
}
}

The new CSS keyframe animation scales and rotates the box 35%, 70%, and 100% of the way through the 1.5-second animation, while also changing the background color as you can see in the example below:

Notice that each of the keyframe steps has a transform property associated with it as well as a list of behaviors.  I've separated each of the behaviors on separate lines for readability purposes.  You can do this however you want.  Just note that if you want to list out your transform properties on one line that they each need to be separated by a space.

You can format your CSS code any way you want in a development environment.  It's always best practice to write clean, readable code and to minify your CSS code for production environments.

A few additional items to consider

  • Instead of using 0%, you can use the from keyword.
  • Instead of using 100%, you can use the to keyword.
  • You must specify at least a starting or an ending time, 0% or 100%, or use from or to like stated above. Without declaring at least one, the animation will not be valid and will not work.
  • For support in additional browsers, like Safari, it may be required that you prefix your keyframes at-rule with -webkit.  Same goes for other browsers accordingly.