Конструктор @keyframes
РедагуватиСкладає кадри @keyframes і одразу програє їх.
Без fill-mode елемент стрибає назад
Анімація не змінює стилів елемента — вона лише малює його інакше, поки триває. Щойно вона добігає кінця, браузер повертає той вигляд, який заданий у самому CSS.
Тому елемент, який плавно проїхав праворуч, у кінці стрибає на місце. Лікується animation-fill-mode: forwards — «лишити те, що на останньому кадрі». Значення backwards робить те саме для стану ДО старту (важливо разом із затримкою), а both — обидва.
from і to — це просто 0% і 100%
Два записи цілком рівноцінні: from { } і 0% { } — одне й те саме, як to { } і 100% { }. Змішувати їх в одному блоці можна, хоч читається гірше.
Кадр 0% можна й не писати: якщо його немає, браузер візьме поточний стан елемента за початковий.
Від'ємна затримка стартує з середини
animation-delay: -1s при тривалості 2s не відкладає нічого — анімація почнеться одразу з половини.
Це стандартний прийом, коли треба запустити кілька однакових анімацій врозбій: тим самим елементам дають різну від'ємну затримку, і вони рухаються не в такт.
Анімуйте transform і opacity, а не left і width
left, top, width, height змушують браузер перераховувати розкладку сторінки на кожному кадрі — а це найдорожча операція, яка в нього є. На слабкому телефоні анімація почне сіпатись.
transform і opacity розкладки не чіпають: браузер віддає їх відеокарті й малює окремим шаром. Тому «проїхати праворуч» роблять через translateX, а не через left.