Page 47 - CSS

91.667% { background-color: #ff0080; }
100.00% { background-color: #ff0000; }
}

.RainbowBackground {
animation: rainbow-background 5s infinite;
}

View Result

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, -2s would 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; }

https://riptutorial.com/ 25