To create more dynamic and expressive effects than simple transitions allow, you can use the @keyframes rule to define CSS animations.

Keyframe animations let you describe a sequence of visual changes at specific points in time, rather than just animating between two states. The @keyframes syntax lets you specify the intermediate steps of an animation, while the animation property applies this sequence to an element and controls how it plays.

In the bouncing ball example, the @keyframes rule defines the animation sequence named bounce. This sequence has three steps:

• At 0% and 100%, the ball is at the top position (top: 0);
• At 50%, it moves down to top: 80px.

The animation property on the .ball class applies the bounce keyframes, sets the duration to 1s, and makes the animation repeat infinitely.

By adjusting the keyframe steps, you control how the ball moves over time, and the animation property determines how quickly and how often the sequence plays.