Керування Кількістю Повторень та Напрямком Анімації
Властивість animation-iteration-count
Можна керувати кількістю повторень анімації. animation-iteration-count задає, скільки разів анімація буде повторюватися.
animation-iteration-count: number_without_units
Також можна вказати ключове слово infinite як значення. У такому випадку анімація буде виконуватися безкінечно.
Розглянемо наступний приклад і подивимось, як можна впливати на кількість повторень анімації:
index.html
index.css
Властивість animation-direction
animation-direction керує напрямком анімації. Вона визначає, чи повинна анімація відтворюватися вперед, назад або чергувати напрямки вперед і назад.
animation-direction: normal | reverse | alternate | alternate-reverse
normal— значення за замовчуванням. Анімація відтворюється вперед від початку до кінця;reverse— анімація відтворюється у зворотному напрямку від кінця до початку;alternate— анімація відтворюється вперед, потім назад, чергуючи обидва напрямки;alternate-reverse— анімація відтворюється назад і вперед, чергуючи обидва напрямки.
Розглянемо, якого ефекту можна досягти у наступному прикладі. Маємо зображення, для якого за замовчуванням рух повторюється зліва направо. Проте ми можемо змінити цю поведінку. Перевіримо всі чотири значення властивості animation-direction.
index.html
index.css
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Can you show me an example of how to use animation-iteration-count and animation-direction together?
What does the animation look like with each animation-direction value?
Can you explain the difference between alternate and alternate-reverse with a visual example?
Awesome!
Completion rate improved to 2.04Керування Кількістю Повторень та Напрямком Анімації
Свайпніть щоб показати меню
Властивість animation-iteration-count
Можна керувати кількістю повторень анімації. animation-iteration-count задає, скільки разів анімація буде повторюватися.
animation-iteration-count: number_without_units
Також можна вказати ключове слово infinite як значення. У такому випадку анімація буде виконуватися безкінечно.
Розглянемо наступний приклад і подивимось, як можна впливати на кількість повторень анімації:
index.html
index.css
Властивість animation-direction
animation-direction керує напрямком анімації. Вона визначає, чи повинна анімація відтворюватися вперед, назад або чергувати напрямки вперед і назад.
animation-direction: normal | reverse | alternate | alternate-reverse
normal— значення за замовчуванням. Анімація відтворюється вперед від початку до кінця;reverse— анімація відтворюється у зворотному напрямку від кінця до початку;alternate— анімація відтворюється вперед, потім назад, чергуючи обидва напрямки;alternate-reverse— анімація відтворюється назад і вперед, чергуючи обидва напрямки.
Розглянемо, якого ефекту можна досягти у наступному прикладі. Маємо зображення, для якого за замовчуванням рух повторюється зліва направо. Проте ми можемо змінити цю поведінку. Перевіримо всі чотири значення властивості animation-direction.
index.html
index.css
Дякуємо за ваш відгук!
