Keyframes define how an animation changes over time.
With keyframes, you can control:
- Where the animation starts
- What happens in the middle
- How the animation ends
Animation properties control how the keyframes behave.
This animation moves the box forward and back in a loop.
The animation property connects the element to the keyframes.
Here, animation properties are written separately.
This makes the code easier to read and manage.
This animation is often used for notifications and alerts.
Elements smoothly appear instead of popping suddenly.
Common animation properties
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
Looping animations are often used for attention grabbing elements.
Use them carefully so they do not distract users.
Practice task
Create an animation that:
- Uses keyframes with at least three steps
- Changes position and opacity
- Runs for 2 seconds
- Repeats continuously
Next lesson
In the next page, you will learn how to control looping and animation direction.