CSS Animations
Where transition animates between two states, @keyframes defines an animation with multiple frames and timings — looping, multi-step, choreographed.
Define the keyframes
CSS
@keyframes pulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: 0.8; }
100% { transform: scale(1); opacity: 1; }
}
Apply it
CSS
.live-indicator {
animation: pulse 1.2s ease-in-out infinite;
}
Animation properties
| Property | Purpose |
|---|---|
animation-name | The @keyframes rule to use. |
animation-duration | Length of one cycle. |
animation-timing-function | Easing — linear, ease, steps(N), custom cubic. |
animation-delay | Wait before starting. |
animation-iteration-count | Number of loops or infinite. |
animation-direction | normal, reverse, alternate. |
animation-fill-mode | Keep styles before/after animation runs. |
animation-play-state | running or paused. |
Accessibility: Wrap non-essential animations in
@media(prefers-reduced-motion: no-preference) so motion-sensitive users get a still version.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Animations</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Make the pulse animation loop forever.
.dot { animation: pulse 1.2s ease-in-out
; }
A keyword for "never stops".
Discussion
Loading…