By specifying styles for keyframes (or waypoints) along the animation sequence, the @keyframes CSS at-rule regulates the intermediate phases in a CSS animation sequence. This allows you greater control over the animation sequence's intermediate steps than transitions.
@keyframes is a specialised CSS at-rule that specifies keyframes. A keyframe style rule's keyframe selector begins with a percentage (%) or the keywords from (same as 0%) or to (same as 0%). (same as 100 percent ). The selector is used to indicate where a keyframe will be built during the animation's duration.
A keyframe is a point in time when you provide a value like spatial position, opacity, or audio volume. Set at least two keyframes—one for the value at the start of the change and another for the value at the end of the change—to make a change in a property over time.
In film, the frame rate is commonly 24 frames per second. In two minutes, (24 x 60 x 2) = 2,880 frames.
Keyframes can be set or added.
To activate it, click the Stopwatch symbol next to the property name. For that property value, After Effects creates a keyframe at the current time.
Select Animation > Add [x] Keyframe, where [x] represents the name of the property you want to animate.