0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>The animation-direction property has two more values. They are used when the animation playback count animation-iteration-count is greater than one. And they both define the alternating animation duration.</p>
1
<p>The animation-direction property has two more values. They are used when the animation playback count animation-iteration-count is greater than one. And they both define the alternating animation duration.</p>
2
<p>If the alternate value is used, odd runs will be direct and even ones will be reversed.</p>
2
<p>If the alternate value is used, odd runs will be direct and even ones will be reversed.</p>
3
.element { animation-name: move; animation-duration: 1s; animation-iteration-count: 2; animation-direction: alternate; }<p>In our example, the animation move will be played twice: first forwards (odd run), then in reverse (even run).</p>
3
.element { animation-name: move; animation-duration: 1s; animation-iteration-count: 2; animation-direction: alternate; }<p>In our example, the animation move will be played twice: first forwards (odd run), then in reverse (even run).</p>
4
<p>If the alternate-reverse value is used, odd runs will be reversed and even ones will be played forwards.</p>
4
<p>If the alternate-reverse value is used, odd runs will be reversed and even ones will be played forwards.</p>
5
<p>Let’s see how it works in an example.</p>
5
<p>Let’s see how it works in an example.</p>