От автора: к примеру, вам нужно, чтобы анимация длилась одну секунду с задержкой в 4 секунды перед повтором. Вроде бы все просто. Оказывается, не все так просто, но выполнимо.Анимацию придется сымитировать.
Не наш случай
Есть свойство animation-delay, но оно нам не поможет. Свойство задерживает первый старт анимации, после чего она выполняется непрерывно.
Решение: keyframe анимация без изменений
Посчитайте в уме. Я хочу, чтобы анимация длилась одну секунду. ПЛЮС я хочу сделать задержку в 4 секунды между итерациями. РАВНО в сумме 5 секунд.
То есть во время вызова keyframe анимации вам необходимо использовать эту сумму:
|
1 2 3 |
.mover { animation: move 5s infinite; } |
Но теперь наша @keyframes анимация будет длиться 5 секунд:
|
1 2 3 |
@keyframes move { /* что-то произойдет за эти 5 секунд */ } |
Чтобы анимация длилась 1 секунду, нужно вносить изменения каждую 1/5 времени или 20%. На словах это будет вот так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@keyframes move { 0% { transform: translate(0, 0); } /* Закончите все действия к этому моменту */ 20% { transform: translate(200px, 0); } /* Между 20% и 100% ничего не происходит */ 100% { transform: translate(200px, 0); } } |
Можно сократить код, так как значение 0% заранее подразумевается, а этапы анимации можно перечислить через запятую:
|
1 2 3 4 5 |
@keyframes move { 20%, 100% { transform: translate(200px, 0); } } |
Записать можно как угодно. Главное, чтобы правильно были заданы все свойства между финальным этапом и 100% анимации. Демо
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
Комментарии (1)