Keyframes

A transition knows only two values, the old one and the new one, and it runs only when something changes them. Many effects need more than that: a box that moves right and then back, or a color change that starts as soon as the page loads, with no hover at all. CSS handles these with a list of named stops along a timeline, and each stop in that list is called a keyframe.

Defining keyframes and applying them

An animation has two parts. The @keyframes rule defines the stops and gives the animation a name