Define animation waypoints

@keyframes

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;
}
}
Specifying 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;
}
}
Specifying waypoints as percentages

style > animation > @keyframesDefine animation waypoints

Q