Керування Станами Анімації в CSS
Властивість animation-fill-mode
Можна керувати стилями елемента до та після виконання анімації. animation-fill-mode визначає, чи повинен елемент зберігати свій фінальний стан після анімації, чи повертатися до початкового стану.
animation-fill-mode: none | forwards | backwards | both
none— Значення за замовчуванням. Анімація не впливає на вигляд елемента до або після виконання. Елемент виглядає так само, як і спочатку;forwards— Стилі, задані наприкінці анімації, залишаються для елемента, і він не повертається до початкового вигляду;backwards— Елемент матиме стилі, визначені на початку анімації. Навіть якщо анімація запускається при наведенні або має затримку;both— Поєднуєbackwardsіforwards. До запуску анімації елемент матиме стилі, визначені на початку анімації. Після виконання анімації елемент матиме стилі, встановлені наприкінці анімації.
Розглянемо наступний приклад, щоб перевірити різницю між значеннями. Він створений для демонстрації того, що стан елемента ніколи не зміниться, якщо застосовано правильне значення animation-fill-mode. Після виконання коду фінальний стан елементів залишиться незмінним. Щоб побачити анімацію ще раз, перезавантажте сторінку.
index.html
index.css
Властивість animation-play-state
Можна керувати станом відтворення анімації. Вона може бути призупинена або виконуватись.
animation-play-state: running | paused
running— Значення за замовчуванням. Запускає або відновлює анімацію;paused— Зупиняє анімацію у поточному стані.
Розглянемо наступний приклад, у якому нескінченна анімація зупиняється при наведенні курсора.
index.html
index.css
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Can you explain the difference between `animation-fill-mode` values with examples?
How does `animation-play-state` interact with user actions like hover?
Can you provide a practical use case for combining `animation-fill-mode` and `animation-play-state`?
Awesome!
Completion rate improved to 2.04Керування Станами Анімації в CSS
Свайпніть щоб показати меню
Властивість animation-fill-mode
Можна керувати стилями елемента до та після виконання анімації. animation-fill-mode визначає, чи повинен елемент зберігати свій фінальний стан після анімації, чи повертатися до початкового стану.
animation-fill-mode: none | forwards | backwards | both
none— Значення за замовчуванням. Анімація не впливає на вигляд елемента до або після виконання. Елемент виглядає так само, як і спочатку;forwards— Стилі, задані наприкінці анімації, залишаються для елемента, і він не повертається до початкового вигляду;backwards— Елемент матиме стилі, визначені на початку анімації. Навіть якщо анімація запускається при наведенні або має затримку;both— Поєднуєbackwardsіforwards. До запуску анімації елемент матиме стилі, визначені на початку анімації. Після виконання анімації елемент матиме стилі, встановлені наприкінці анімації.
Розглянемо наступний приклад, щоб перевірити різницю між значеннями. Він створений для демонстрації того, що стан елемента ніколи не зміниться, якщо застосовано правильне значення animation-fill-mode. Після виконання коду фінальний стан елементів залишиться незмінним. Щоб побачити анімацію ще раз, перезавантажте сторінку.
index.html
index.css
Властивість animation-play-state
Можна керувати станом відтворення анімації. Вона може бути призупинена або виконуватись.
animation-play-state: running | paused
running— Значення за замовчуванням. Запускає або відновлює анімацію;paused— Зупиняє анімацію у поточному стані.
Розглянемо наступний приклад, у якому нескінченна анімація зупиняється при наведенні курсора.
index.html
index.css
Дякуємо за ваш відгук!
