0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>Finally, the most important property is animation-timing-function. It defines how an animation will be played: at what speed and with what acceleration its properties will change.</p>
1
<p>Finally, the most important property is animation-timing-function. It defines how an animation will be played: at what speed and with what acceleration its properties will change.</p>
2
<p>In the previous examples, animations were played with identical dynamics: we only changed their durations, but not their “form”. By default, this “form” corresponds to the first graph, which shows that the animation starts slowly then accelerates towards the end and slows down again closer to the end.</p>
2
<p>In the previous examples, animations were played with identical dynamics: we only changed their durations, but not their “form”. By default, this “form” corresponds to the first graph, which shows that the animation starts slowly then accelerates towards the end and slows down again closer to the end.</p>
3
<p>That’s how the ease value of the animation-timing-function property works.</p>
3
<p>That’s how the ease value of the animation-timing-function property works.</p>
4
<ul><li><p>ease</p>
4
<ul><li><p>ease</p>
5
</li>
5
</li>
6
<li><p>linear</p>
6
<li><p>linear</p>
7
</li>
7
</li>
8
</ul><p>However, we can make the animation’s playback uniform, without acceleration or deceleration. To do this, use the linear value. As you can see in the second graph, the animation will be played at a constant speed.</p>
8
</ul><p>However, we can make the animation’s playback uniform, without acceleration or deceleration. To do this, use the linear value. As you can see in the second graph, the animation will be played at a constant speed.</p>