CSS Animations Animations with keyframes
Example
For multi-stage CSS animations, you can create CSS @keyframes. Keyframes allow you to define multiple animation points, called a keyframe, to define more complex animations.
Basic Example
In this example, we'll make a basic background animation that cycles between all colors.
@keyframes rainbow-background {
0% { background-color: #ff0000; }
8.333% { background-color: #ff8000; }
16.667% { background-color: #ffff00; }
25.000% { background-color: #80ff00; }
33.333% { background-color: #00ff00; }
41.667% { background-color: #00ff80; }
50.000% { background-color: #00ffff; }
58.333% { background-color: #0080ff; }
66.667% { background-color: #0000ff; }
75.000% { background-color: #8000ff; }
83.333% { background-color: #ff00ff; }
91.667% { background-color: #ff0080; }
100.00% { background-color: #ff0000; }
}
.RainbowBackground {
animation: rainbow-background 5s infinite;
}
There's a few different things to note here. First, the actual @keyframes syntax.
@keyframes rainbow-background{
This sets the name of the animation to rainbow-background.
0% { background-color: #ff0000; }
This is the definition for a keyframe within the animation. The first part, the 0% in the case, defines where the keyframe is during the animation. The 0% implies it is 0% of the total animation time from the beginning.
The animation will automatically transition between keyframes. So, by setting the next background color at 8.333%, the animation will smoothly take 8.333% of the time to transition between those keyframes.
.RainbowBackground {
animation: rainbow-background 5s infinite;
}
This code attaches our animation to all elements which have the .RainbowBackground class.
The actual animation property takes the following arguments.
- animation-name: The name of our animation. In this case,
rainbow-background - animation-duration: How long the animation will take, in this case 5 seconds.
- animation-iteration-count (Optional): The number of times the animation will loop. In this case, the animation will go on indefinitely. By default, the animation will play once.
- animation-delay (Optional): Specifies how long to wait before the animation starts. It defaults to 0 seconds, and can take negative values. For example,
-2swould start the animation 2 seconds into its loop. - animation-timing-function (Optional): Specifies the speed curve of the animation. It defaults to
ease, where the animation starts slow, gets faster and ends slow.
In this particular example, both the 0% and 100% keyframes specify { background-color: #ff0000; }. Wherever two or more keyframes share a state, one may specify them in a single statement. In this case, the two 0% and 100% lines could be replaced with this single line:
0%, 100% { background-color: #ff0000; }
Cross-browser compatibility
For older WebKit-based browsers, you'll need to use the vendor prefix on both the @keyframes declaration and the animation property, like so:
@-webkit-keyframes{}
-webkit-animation: ...
