Ещё один возможный класс значений transition-timing-function — это steps.

Они позволяют задать «ступеньки», по которым будет идти переход. Синтаксис steps следующий:

transition-timing-function: steps(число_шагов, направление);

Тут всё просто: число_шагов — это целое число, за которое будет выполнен переход; направление может принимать значение start или end.

При заданном start первый шаг выполняется одновременно с началом перехода, а в случае c end последний шаг будет выполнен вместе с завершением перехода.

Кстати, переход можно описать в сокращённом виде свойством transition. Параметры перехода просто перечисляются через пробел: свойство, длительность, форма и задержка:

transition: width 1s ease-in 2s;

К примеру, переход тут применяется к ширине элемента, будет длиться 1 секунду с формой ease-in и задержкой перед началом в 2 секунды.

Описание перехода для квадрата .square в этом задании мы тоже перевели в короткую форму.