css властивість animation

Універсальна властивість animation — скорочена властивість для восьми властивостей анімації:

• animation-name - Встановлює одну або кілька анімацій, які застосовуються до елементу. Являє собою ім'я, пов'язане з правилом @keyframes, воно в свою чергу задає послідовність руху.
• animation-duration - Задає час в секундах або мілісекундах, скільки повинен тривати один цикл анімації. За замовчуванням значення дорівнює 0s, це означає, що ніякої анімації немає.
• animation-timing-function - Встановлює, згідно якої функції часу повинна відбуватися анімація кожного циклу між ключовими кадрами.
• animation-delay - Встановлює час очікування перед запуском циклу анімації.
• animation-iteration-count - Властивість визначає, скільки разів програвати цикл анімації до її зупинки.
• animation-direction - Встановлює напрямок руху анімації.
• animation-fill-mode - Визначає, які стилі повинні застосовуватися до елементу, коли анімація не програється.
• animation-play-state - Властивість визначає, програвати анімацію або поставити її на паузу.

Для створення анімації засобами CSS, використовуйте властивість animation разом з правилом @keyframes, яке встановлює візуальні ефекти для анімації.

Зверніть увагу, що порядок у визначенні властивості має дуже важливе значення. Перше значення у формі часу, розглядається як animation-duration, а друге - як animation-delay.

Порядок також важливий для визначення animation-name серед інших значень. Під час аналізування правил, ключові слова допустимі лише для властивостей відмінних від animation-name, і значення яких не було задані раніше, будуть прийняті саме для них, а не для animation-name. Крім того, мають бути задані значення без задання для всіх властивостей, щоб була можливість визначити animation-name.

правити

Нотатка

Завжди вказуйте властивість animation-duration (тривалість анімації), в іншому випадку тривалість дорівнює 0, і тому анімація не буде відтворюватися.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

animation: animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction || animation-fill-mode || animation-play-state

Властивість animation може отримувати 10 значень:

animation-name

Задає ім'я @keyframes для анімації

автор: Svitlana

правити

animation-duration

Визначає скільки секунд або мілісекунд анімації потрібно, щоб завершити один цикл

автор: Svitlana

правити

animation-delay

Визначає затримку до початку анімації

автор: Svitlana

правити

animation-iteration-count

Вказує, скільки разів анімація повинна повторюватись

автор: Svitlana

правити

animation-direction

Визначає, чи повинна анімація відтворюватися в зворотному напрямку на альтернативних циклах.

автор: Svitlana

правити

animation-fill-mode

Визначає стиль для елемента, коли анімація не відтворюється (коли анімація закінчилася або має затримку)

автор: Svitlana

правити

animation-play-state

Визначає, чи буде анімація працювати або буде призупинена

автор: Svitlana

правити

animation-timing-function

Визначає криву (функцію) швидкості анімації

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена)

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
animation	43.0 <br>3.0 -webkit-	16.0 <br>5.0 -moz-	9.0 <br>4.0 -webkit-	12.10 <br>12.0 -o-	12.0	10.0

Підтримка: мобільні переглядачі

Переглядач
animation	2.0 -webkit-	16.0 <br>5.0 -moz-	9.2 <br>4.0 -webkit-

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box"></div>

.box {
    width: 60px;
    height: 60px;
    background: #0172ad;
    position: relative;
    animation: mymove 5s infinite;
}

@keyframes mymove {
    from { left: 0; }
    to   { left: 200px; }
}