Від автора: наприклад, вам потрібно, щоб анімація тривала одну секунду з затримкою в 4 секунди перед повтором. Начебто все просто. Виявляється, не все так просто, але здійснимо.Анімацію доведеться зімітувати.
Не наш випадок
Є властивість animation-delay, але воно нам не допоможе. Властивість затримує перший старт анімації, після чого вона виконується безперервно.
Рішення: keyframe анімація без змін
Порахуйте подумки. Я хочу, щоб анімація тривала одну секунду. ПЛЮС я хочу зробити затримку в 4 секунди між ітераціями. ОДНО в сумі 5 секунд.
Тобто під час виклику keyframe анімації вам необхідно використати цю суму:
.mover {
animation: move 5s infinite;
}
Але тепер наша @keyframes анімація буде тривати 5 секунд:
@keyframes move {
/* що станеться за ці 5 секунд */
}
Щоб анімація тривала 1 секунду, потрібно вносити зміни кожного 1/5 часу або 20%. На словах це буде ось так:
@keyframes move {
0% {
transform: translate(0, 0);
}
/* Закінчите всі дії до цього моменту */
20% {
transform: translate(200px, 0);
}
/* Між 20% і 100% нічого не відбувається */
100% {
transform: translate(200px, 0);
}
}
Можна скоротити код, так як значення 0% заздалегідь мається на увазі, а етапи анімації можна перерахувати через кому:
@keyframes move {
20%, 100% {
transform: translate(200px, 0);
}
}
Записати можна як завгодно. Головне, щоб правильно були задані всі властивості між фінальним етапом і 100% анімації. Демо
