CSS keyframe анімація з затримкою між ітераціями

23

Від автора: наприклад, вам потрібно, щоб анімація тривала одну секунду з затримкою в 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% анімації. Демо