@keyframes
Describes the steps of an animation that is then started with the `animation` property.
Syntax
@keyframes name { from { … } to { … } }Parameters
| Parameter | Type | Description |
|---|---|---|
| from | to | keyframe | The start and the end, the same as `0%` and `100%`. |
| % | keyframe | Intermediate steps: `50%`; several can share a rule: `0%, 100%`. |
Examples
A bouncing ball:
<style>
@keyframes bounce {
0%, 100% { translate: 0 0; }
50% { translate: 0 -30px; }
}
.ball { width: 30px; height: 30px; margin-top: 35px; border-radius: 50%; background: tomato;
animation: bounce 1s ease-in-out infinite; }
</style>
<div class="ball"></div>Notes
If from or to is missing, the element's current styles are used instead. The name must be unique: a later @keyframes with the same name replaces the earlier one.
See also
- animation — Runs a `@keyframes` animation on an element.
- transition — Animates the change of a property from the old value to the new one.
- transform — Moves, rotates, scales or skews an element without affecting the layout around it.
Related recipes
In the tutorial
- Animations — CSS animations — the @keyframes rule, the animation property, repeats and direction, percentage keyframes, fill-mode and prefers-reduced-motion.