Вземане на време: CSS стъпка () функция

Дискретно или непрекъснато движение

По подразбиране CSS преходите и анимациите създават непрекъснато движение между състоянията. Тези. ако поставите елемент някъде на екрана и го преместите на друго място, браузърът ще се опита да направи прехода възможно най-плавен.

Анимацията ще бъде плавна, независимо от избраната функция за синхронизиране или дори ако елементът не се движи; например, ако промените цвета на фона на елемент с течение на времето, промяната също ще бъде плавна.

За да добавите паузи към CSS анимация, трябва да вземете два ключови кадра на анимацията с една и съща информация и да ги поставите един след друг, разделени само по време: пример може да се види в кода на моя плъзгач на CSS. Но ако ключовите кадри са различни, тогава браузърът ще се върне към плавна анимация на елемента.

В аналоговите ръчни часовници механичното движение се нарича анимация: плавно движение, безкрайна скала, като втора ръка в Rolex. Ние с вас вероятно сме по-запознати с кварцовото движение на циферблата: поредица от отделни дискретни движения на стрелката. Как да пресъздадем това движение в CSS?

Практически курс за оформление на адаптивен уебсайт от нулата!

Вземете курс и научете как да подреждате модерни уебсайтове в HTML5 и CSS3

Използване на функцията стъпки ()

С функцията стъпки () можем да принудим CSS анимацията да "отметне". Добър пример е втора ръка на часовник: пълният цикъл на набиране отнема една минута, т.е. можем да разделим движението на втора ръка на 60 стъпки. Видяхте пример за такъв часовник в началото на статията.