The @keyframes
rule specifies steps (waypoints) in an animation sequence.
Each step has a different style associated with it.
Animation sequences start at 0% (from
) and end at 100% (to
).
An animation using the @keyframes
rule.
The from
and to
keywords mark the start and end of the sequence.
<style>
.block {
background-color: steelblue;
width: 90px;
height: 90px;
animation-name: movingAnimation;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes movingAnimation {
from { transform: none; }
to { transform: translateX(250%); }
}
</style>
<div class="block"></div>
Two keywords from
and to
mark the start and end points.
Alternatively, use 0% (from
) and 100% (to
), and any other % in between (see below).
@keyframes animation-name { keyframes-selector { css-styles; } }
Value | Description |
---|---|
animation-name |
Required. Defines the name of the animation. |
keyframes-selector |
Required. Percentage of the animation duration. Legal values: 0-100% from (same as 0%) to (same as 100%) |
css-styles |
Required. One or more legal CSS style properties |
A 5-step @keyframes
sequence.
The element changes position and color during these steps.
<style>
.animation-example {
width: 100px;
height: 100px;
background-color: aliceblue;
position: relative;
animation-name: bgPositionAnimation;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes bgPositionAnimation {
0% { background-color: lightblue; left: 0px; top: 0px; }
25% { background-color: orangered; left: 200px; top: 0px; }
50% { background-color: yellow; left: 200px; top: 200px; }
75% { background-color: teal; left: 0px; top: 200px; }
100% { background-color: lightblue; left: 0px; top: 0px; }
}
</style>
<div class="animation-example"></div>
This table shows when @keyframes
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 |