Keyframe Animations and Syntax
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.
index.html
styles.css
In the bouncing ball example, the @keyframes rule defines the animation sequence named bounce. This sequence has three steps:
- At
0%and100%, the ball is at the top position (top: 0); - At
50%, it moves down totop: 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.
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Can you explain how to create a custom keyframe animation?
What other properties can I use with the animation property?
How do I pause or stop a CSS animation?
Awesome!
Completion rate improved to 8.33Keyframe Animations and Syntax
Swipe to show menu
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.
index.html
styles.css
In the bouncing ball example, the @keyframes rule defines the animation sequence named bounce. This sequence has three steps:
- At
0%and100%, the ball is at the top position (top: 0); - At
50%, it moves down totop: 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.
Thanks for your feedback!
