CSS Animations with Keyframes and the @keyframe Rule

In addition to creating a CSS fade transition, you can also implement an encapsulated set of CSS rules called keyframes to create stunning CSS animations.

The CSS @keyframes rule allows you to completely control each step of your CSS animations sequences.  Each keyframe specifies a unique set of rules and instructs the browser to perform that animation within that keyframe.

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, and more.

A Basic CSS Keyframe Animation

Let's start by creating a red box, this time replacing all transition properties with our CSS 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 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 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 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 pretty much any way you want, especially in a development environment.  Just remember it's always best practice to write clean, readable code and to minify your CSS code for production environments.

Other Useful Tidbits

• 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.

Conclusion

Keyframes give you complete control over each step of your CSS animations.  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, and much more.