The animation property defines an animation.
It is a shorthand property for several animation properties.
These include animation-duration, animation-direction, and others.
This animation resizes the element by animating its width.
It repeats every 3 seconds.
<style>
.animate {
width: 80px;
height: 80px;
background: steelblue;
animation: sizingAnimation 3s infinite;
}
@keyframes sizingAnimation {
from { width: 80px; }
to { width: 300px; }
}
</style>
<div class="animate"></div>
The animation is named and defined using a @keyframes rule.
The animation will play for 3 seconds and then repeat.
It animates from a small width value to a larger value.
Various CSS features can be animated.
For example, background, color, opacity, position, and more.
The animation property is a shorthand for several animation properties. They are:
A @keyframe rule defines the from and to positions, which is then bound to the animation property.
animation: name | duration | timing-function |
delay | iteration-count | direction |
fill-mode | play-state;
| Value | Description |
|---|---|
| animation-name | The name of the animation to be used for the selector |
| animation-duration | Number of seconds or milliseconds an animation takes to complete |
| animation-timing-function | Animation speed curve |
| animation-delay | Delay before the animation starts |
| animation-iteration-count | Number of times an animation should be played |
| animation-direction | Indicates whether the animation should play in reverse or alternate cycles |
| animation-fill-mode | Values applied by the animation outside the time it is executing |
| animation-play-state | Sets animation to running or paused |
Animations can start and stop with click event and JavaScript.
Click start to start the animation, and Stop to stop it.
<style>
.block {
width: 80px;
height: 80px;
background-color: steelblue;
}
.animate {
animation: sizeEvents 3s infinite;
}
@keyframes sizeEvents {
from { width: 80px; }
to { width: 300px; }
}
</style>
<div class="block" id="id"></div><br/>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
<script>
let start = () => {
document.getElementById('id').classList.add('animate');
}
let stop = () => {
document.getElementById('id').classList.remove('animate');
}
</script>
This animation is bound to the named @keyframes.
The Start button invokes Javascript which locates the element via its id.
It then adds a classname with animation properties and starts animating.
The Stop button removes the animation CSS classname.
This table shows when animation support started for each browser.
 Chrome
|
43.0 | May 2015 |
 Firefox
|
16.0 | Oct 2012 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
30.0 | Jun 2015 |
 Safari
|
9.0 | Sep 2015 |
