Define animation waypoints
@keyframes
![](/img/style/animation/@keyframes.png)
The @keyframes rule is used to define the waypoints in an animation sequence. Waypoints provide control over the intermediate steps of an animation sequence.
Properties
Keyframes must provide an animation-name
that matches a name chosen and declared elsewhere in CSS .
Keyframes may specify either from
and to
waypoints, or three or more percentage waypoints.
Examples
@keyframes grow-height {
from {
height: 0px;
}
to {
height: 100px;
}
}
from
and to
waypoints@keyframes grow-height {
0% {
height: 0px;
opacity: 0.0;
}
33% {
height: 50px;
opacity: 0.25;
}
66% {
height: 100px;
opacity: 0.25;
}
100% {
height: 100px;
opacity: 1.0;
}
}