animation
Runs a `@keyframes` animation on an element.
Syntax
animation: name duration easing delay count direction;Values
| Parameter | Type | Description |
|---|---|---|
| name | ident | The name of a `@keyframes` rule. |
| duration | time | The length of one cycle: `2s`. |
| infinite | count | number | How many times to repeat: `3`, `infinite`. |
| alternate | keyword | Every second cycle runs backwards. |
| forwards | keyword | Keeps the final state after the end. |
Examples
An endless pulse:
<style>
@keyframes pulse {
from { scale: 1; }
to { scale: 1.2; }
}
.dot { width: 30px; height: 30px; border-radius: 50%; background: crimson; margin: 10px;
animation: pulse 0.8s ease-in-out infinite alternate; }
</style>
<div class="dot"></div>A one-time appearance:
<style>
@keyframes slide-in {
from { opacity: 0; translate: -40px 0; }
}
.msg { padding: 8px; background: palegreen; animation: slide-in 0.6s ease-out; }
</style>
<p class="msg">This message slides in when the page loads.</p>Notes
Unlike transition, an animation starts by itself and can loop. Respect the user's settings: wrap large motion in @media (prefers-reduced-motion: no-preference).
See also
- @keyframes — Describes the steps of an animation that is then started with the `animation` property.
- 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.
- animation-timeline — Ties a CSS animation to scrolling instead of time: the animation progresses as the page or an element is scrolled.
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.