0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>For each animation, you need to define its name and describe the initial and final keyframes that are set using the from and to reserved keywords or 0% and 100% values.</p>
1
<p>For each animation, you need to define its name and describe the initial and final keyframes that are set using the from and to reserved keywords or 0% and 100% values.</p>
2
<p>You can also describe intermediate keyframes that are defined as percentage values.</p>
2
<p>You can also describe intermediate keyframes that are defined as percentage values.</p>
3
<p>If the initial keyframe is not defined, the animation is played from the element’s initial style state to the nearest step from the @keyframes list and so on.</p>
3
<p>If the initial keyframe is not defined, the animation is played from the element’s initial style state to the nearest step from the @keyframes list and so on.</p>
4
<p>If the final frame is not defined, once the last intermediate step is reached, the animation will be played backwards until the element has reached its initial state.</p>
4
<p>If the final frame is not defined, once the last intermediate step is reached, the animation will be played backwards until the element has reached its initial state.</p>
5
<p>Keyframes inside @keyframes can be written in an arbitrary order, but it is recommended to list them chronologically in ascending order.</p>
5
<p>Keyframes inside @keyframes can be written in an arbitrary order, but it is recommended to list them chronologically in ascending order.</p>
6
<p>The duration of the animation, animation-duration, is set in seconds or milliseconds, for example: 10s, 100ms.</p>
6
<p>The duration of the animation, animation-duration, is set in seconds or milliseconds, for example: 10s, 100ms.</p>
7
<p>Let’s now try to create an animation without describing the initial frame, using 50% and 100% steps.</p>
7
<p>Let’s now try to create an animation without describing the initial frame, using 50% and 100% steps.</p>