CSS @keyframes

The CSS @keyframes at-rule allows you to create animations using CSS.

In CSS, animations are created by changing an element's styles over a given period of time. The @keyframes at-rule is what you use to do this. (Note: It is called an "at-rule" due to the fact that it begins with @ and it specifies a set of rules for our animation).

Creating an Animation

To create an animation, the @keyframes at-rule is used in conjunction with one or more animation properties (for example the animation property). The @keyframes at-rule allows you to apply different styles at different points throughout the animation. More precisely, you define the styles at various points of each iteration (or cycle or loop) of the animation. You then use the animation properties to determine how many of these iterations the animation should have, how fast it should run, how long it should run for, etc.

You bind @keyframes to the animation properties using a name. You provide this name whenever you use @keyframes (i.e. @keyframes <name>) and you reference it using the animation-name property or the animation shorthand property.

Keyframe Selectors

Each @keyframes at-rule contains one or more keyframes selectors. Keyword selectors are used to define the different points along the iteration that you'd like the styles to change.

A keyframe selector can be the from & to keywords, or percentage values, or both. The from keyword is equal to 0%, which represents the start of the iteration. The to keyword is equal to 100%, which represents the end. You can also use percentages to represent various points along the iteration. For example, 20% represents 20% of the duration and 50% represents the midway point.

You can have many keyframe selectors within a @keyframes at-rule - each keyframe selector representing a different point in the animation.

Keyframe Declarations

Each keyframe selector contains one or more keyframe declarations. A keyframe declaration is simply a set of properties and values. For example color:blue; font-size:1.5em;. Each keyframe declaration is surrounded by curly brackets (i.e. { and }).

You can also use the animation-timing-function property in your keyframe declaration to determine how the animation will change speed throughout the keyframe.

Syntax

Possible Values

name

Required value. This is an identifier which gives the name for the animation. This can then be referenced by the animation-name property (or the animation shorthand property).

keyframe selector

Required value. Represents a specific point within the iteration. Can be either the from and to keyword or a percentage value. The from keyword is equal to 0%, which represents the start of the iteration. The to keyword is equal to 100%, which represents the end. You can also use percentages to represent various points along the iteration. For example, 20% represents 20% of the duration and 50% represents the midway point.

keyframe declaration block

Required value. Represents a set of CSS properties and values. For example color:blue; font-size:1.5em;. Each keyframe declaration is surrounded by curly brackets (i.e. { and }).

Animation Properties

The @keyframes at-rule is used alongside the animation related properties, including the following: animation, animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.

Example Code

Basic CSS

Working Example within an HTML Document

As mentioned, this then needs to be paired up with one or more animation properties (such as the animation property) to run the actual animation.

Here's what that looks like within an HTML document using embedded styles:

CSS Specifications

• This at-rule is defined in CSS Animations (W3C Working Draft 19 February 2013)
• It's also defined in CSS Animations Level 1 (Editor’s Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.