Керування Кількістю Повторень та Напрямком Анімації

Властивість animation-iteration-count

Можна керувати кількістю повторень анімації. animation-iteration-count задає, скільки разів анімація буде повторюватися.

animation-iteration-count: number_without_units

Також можна вказати ключове слово infinite як значення. У такому випадку анімація буде виконуватися безкінечно. Розглянемо наступний приклад і подивимось, як можна впливати на кількість повторень анімації:

Властивість animation-direction

animation-direction керує напрямком анімації. Вона визначає, чи повинна анімація відтворюватися вперед, назад або чергувати напрямки вперед і назад.

animation-direction: normal | reverse | alternate | alternate-reverse

• normal — значення за замовчуванням. Анімація відтворюється вперед від початку до кінця;
• reverse — анімація відтворюється у зворотному напрямку від кінця до початку;
• alternate — анімація відтворюється вперед, потім назад, чергуючи обидва напрямки;
• alternate-reverse — анімація відтворюється назад і вперед, чергуючи обидва напрямки.

Розглянемо, якого ефекту можна досягти у наступному прикладі. Маємо зображення, для якого за замовчуванням рух повторюється зліва направо. Проте ми можемо змінити цю поведінку. Перевіримо всі чотири значення властивості animation-direction.