0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>Another possible transition-timing-function value class is steps.</p>
1
<p>Another possible transition-timing-function value class is steps.</p>
2
<p>They allow you to assign the “steps” that the transition will unfold across. The steps syntax is as follows:</p>
2
<p>They allow you to assign the “steps” that the transition will unfold across. The steps syntax is as follows:</p>
3
transition-timing-function: steps(<em>number_of_steps</em>,<em>direction</em>);<p>Everything is simple here:<em>number_of_steps</em> is an integer designating the number of steps over which the transition will be performed; and<em>direction</em>can take either the value start or end.</p>
3
transition-timing-function: steps(<em>number_of_steps</em>,<em>direction</em>);<p>Everything is simple here:<em>number_of_steps</em> is an integer designating the number of steps over which the transition will be performed; and<em>direction</em>can take either the value start or end.</p>
4
<p>Given a start, the first step is carried out at the same time as the start of the transition, and in the case of end, the last step will be carried out together with the completion of the transition.</p>
4
<p>Given a start, the first step is carried out at the same time as the start of the transition, and in the case of end, the last step will be carried out together with the completion of the transition.</p>
5
<p>By the way, the transition can be described in shorthand notation using the transition property. The transition parameters are simply listed separated by spaces: property, duration, form, and delay:</p>
5
<p>By the way, the transition can be described in shorthand notation using the transition property. The transition parameters are simply listed separated by spaces: property, duration, form, and delay:</p>
6
transition: width 1s ease-in 2s;<p>In this example, a transition is applied to the width of the element, and it will last for one second following the ease-in form, and there will be a delay of 2 seconds before it starts.</p>
6
transition: width 1s ease-in 2s;<p>In this example, a transition is applied to the width of the element, and it will last for one second following the ease-in form, and there will be a delay of 2 seconds before it starts.</p>
7
<p>We also converted the description of the transition for the .square square in this task to shorthand form.</p>
7
<p>We also converted the description of the transition for the .square square in this task to shorthand form.</p>