Дискретизація за часом

Дискретний чи безперервний рух

За умовчанням у CSS переходах та анімації створюється безперервний рух між станами. Тобто. якщо розмістити елемент десь на екрані і пересувати його в інше місце, браузер намагатиметься зробити перехід якомога плавнішим.

Анімація буде плавною незалежно від обраної таймінг функції, або навіть якщо елемент не рухається; Наприклад, якщо змінювати фоновий колір елемента з часом, зміна буде плавною.

Щоб додати паузи в анімацію CSS, необхідно взяти дві keyframes анімації з однаковою інформацією і розташувати їх одна за одною, розділені лише часом: приклад можна подивитися в коді мого CSS слайдера. Але якщо keyfram'и різні, то браузер повернеться до плавної анімації елемента.

У аналоговому наручному годиннику анімацією називається механічний рух: плавне переміщення, нескінченна шкала, як секундна стрілка в ролексі. Ми з вами, мабуть, більше знайомі із кварцовим механізмом циферблату: серія окремих дискретних переміщень стрілки. Як відтворити подібний рух у CSS?

дискретизація

Практичний курс з верстки адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

За допомогою функції steps()

За допомогою функції steps() ми можемо змусити CSS анімацію цокати. Хороший приклад – секундна стрілка годинника: повний цикл циферблата займає одну хвилину, тобто. ми можемо поділити рух секундної стрілки на 60 кроків. Приклад такого годинника ви бачили на початку статті.