Приклади - зворотна анімація css. Приклади - зворотна анімація css Короткий запис анімації: властивість animation

CSS3-анімаціянадає сайтам динамічність. Вона оживляє веб-сторінки, покращуючи взаємодію з користувачем. На відміну від CSS3-переходів, створення анімації базується на ключових кадрах, які дозволяють автоматично відтворювати і повторювати ефекти протягом заданого часу, а також зупиняти анімацію всередині циклу.

CSS3-анімація може застосовуватися практично для всіх html-елементів, а також для псевдоелементів: before та: after. Список аніміруемих властивостей наведено на сторінці. При створенні анімації не варто забувати про можливі проблемиз продуктивністю, так як на зміну деяких властивостей потрібно багато ресурсів.

Введення в CSS-анімацію

підтримка браузерами

IE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: —
Android Browser: 44, 4.1 -webkit-
Chrome for Android: 44

1. Ключові кадри

Ключові кадри використовуються для вказівки значень властивостей анімації в різних точках анімації. Ключові кадри визначають поведінку одного циклу анімації; анімація може повторюватися нуль або більше разів.

Ключові кадри вказуються за допомогою правила @keyframes, що визначається таким чином:

@keyframes ім'я анімації (список правил)

Створення анімації починається з установки ключових кадрівправила @keyframes. Кадри визначають, які властивості на якому етапі будуть анімовані. Кожен кадр може включати один або більше блоків оголошення з одного або більше пар властивостей і значень. Правило @keyframes містить ім'я анімації елемента, яке пов'язує правило і блок оголошення елемента.

@keyframes shadow (from (text-shadow: 0 0 3px black;) 50% (text-shadow: 0 0 30px black;) to (text-shadow: 0 0 3px black;))

Ключові кадри створюються за допомогою ключових слів from і to (еквівалентні значенням 0% і 100%) або за допомогою процентних пунктів, яких можна задавати скільки завгодно. Також можна комбінувати ключові слова і процентні пункти. Якщо кадри мають однакові властивості і значення, їх можна об'єднати в одне оголошення:

@keyframes move (from, to (top: 0; left: 0;) 25%, 75% (top: 100%;) 50% (top: 50%;))

Якщо 0% або 100% кадри не вказані, то браузер користувача створює їх, використовуючи обчислювані (спочатку задані) значення аніміруемого властивості.

Якщо кілька правил @keyframes визначені з одним і тим же ім'ям, спрацює останнім в порядку документа, а всі попередні проігнорує.

Після оголошення правила @keyframes, ми можемо посилатися на нього у властивості animation:

H1 (font-size: 3.5em; color: darkmagenta; animation: shadow 2s infinite ease-in-out;)

Не рекомендується анімувати нечислові значення (за рідкісним винятком), так як результат в браузері може бути непередбачуваним. Також не слід створювати ключові кадри для значень властивостей, які не мають середньої точки, наприклад, для значень властивості color: pink і color: #ffffff, width: auto і width: 100px або border-radius: 0 і border-radius: 50% ( в цьому випадку правильно буде вказати border-radius: 0%).

1.1. Тимчасова функція для ключових кадрів

Правило стилю ключового кадру також може оголошувати тимчасову функцію, яка повинна використовуватися при переміщенні анімації до наступного ключового кадру.

приклад

@keyframes bounce (from (top: 100px; animation-timing-function: ease-out;) 25% (top: 50px; animation-timing-function: ease-in;) 50% (top: 100px; animation-timing- function: ease-out;) 75% (top: 75px; animation-timing-function: ease-in;) to (top: 100px;))

П'ять ключових кадрів вказані для анімації з ім'ям «bounce». Між першим і другим ключовим кадром (тобто між 0% і 25%) використовується функція уповільнення. Між другим і третім ключовим кадром (тобто між 25% і 50%) використовується функція плавного прискорення. І так далі. Елемент буде переміщатися вгору по сторінку на 50px, сповільняться в міру того, як він досягає своєї найвищої точки, а потім прискорюючись, коли він падає до 100px. Друга половина анімації поводиться аналогічним чином, але тільки переміщує елемент на 25px вгору по сторінці.

Тимчасова функція, зазначена в ключовому кадрі to або 100%, ігнорується.

2. Назва анімації: властивість animation-name

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

Якщо кілька анімацій намагаються змінити один і той же властивість, то виконається анімація, найближча до кінця списку імен.

Ім'я анімації чутливе до регістру, не допускається використання ключового слова none. Рекомендується використовувати назву, що відображає суть анімації, при цьому можна використовувати одне або кілька слів, перерахованих через дефіс - або символ нижнього підкреслення _.

Властивість не успадковується.

синтаксис

Animation-name: none; animation-name: test-01; animation-name: -sliding; animation-name: moving-vertically; animation-name: test2; animation-name: test3, move4; animation-name: initial; animation-name: inherit;

3. Тривалість анімації: властивість animation-duration

Властивість animation-duration визначає тривалість одного циклу анімації. Задається в секундах s або мілісекундах ms. Якщо для елемента задано більше однієї анімації, то можна встановити різний часдля кожної, перерахувавши значення через кому.

Властивість не успадковується.

синтаксис

Animation-duration: .5s; animation-duration: 200ms; animation-duration: 2s, 10s; animation-duration: 15s, 30s, 200ms;

4. Тимчасова функція: властивість animation-timing-function

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

Властивість не успадковується.

синтаксис

Animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; animation-timing-function: cubic-bezier (0.1, 0.7, 1.0, 0.1); animation-timing-function: steps (4, end); animation-timing-function: ease, step-start, cubic-bezier (0.1, 0.7, 1.0, 0.1); animation-timing-function: initial; animation-timing-function: inherit;

За допомогою покрокової анімації можна створювати цікаві ефекти, Наприклад, друкується текст або індикатор завантаження.

5. Повтор анімації: властивість animation-iteration-count

Властивість animation-iteration-count вказує, скільки разів програється цикл анімації. Початкове значення 1 означає, що анімація буде відтворюватися від початку до кінця один раз. Це властивість часто використовується в поєднанні зі значенням alternate властивості animation-direction, яке змушує анімацію відтворюватися в зворотному порядку в альтернативних циклах.

Властивість не успадковується.

синтаксис

Animation-iteration-count: infinite; animation-iteration-count: 3; animation-iteration-count: 2.5; animation-iteration-count: 2, 0, infinite;

6. Напрям анімації: властивість animation-direction

Властивість animation-direction визначає, чи повинна анімація відтворюватися в зворотному порядку в деяких або у всіх циклах. Коли анімація відтворюється в зворотному порядку, тимчасові функції також міняються місцями. Наприклад, при відтворенні в зворотному порядку функція ease-in буде вести себе як ease-out.

Властивість не успадковується.

Щоб визначити, чи є повтор циклу анімації парній або непарній - кількість повторів починається з 1.

синтаксис

Animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; animation-direction: normal, reverse; animation-direction: alternate, reverse, normal; animation-direction: initial; animation-direction: inherit;

7. Відтворення анімації: властивість animation-play-state

Властивість animation-play-state визначає, чи буде анімація запущена або припинена. Зупинка анімації всередині циклу можлива через використання цієї властивості в скрипте JavaScript. Також можна зупиняти анімацію при наведенні курсору миші на об'єкт - стан: hover.

Властивість не успадковується.

синтаксис

Animation-play-state: running; animation-play-state: paused; animation-play-state: paused, running, running; animation-play-state: initial; animation-play-state: inherit;

8. Затримка анімації: властивість animation-delay

Властивість animation-delay визначає, коли анімація почнеться. Здається в секундах s або мілісекундах ms.

Властивість не успадковується.

синтаксис

Animation-delay: 5s; animation-delay: 3s, 10ms;

9. Стан елемента до і після відтворення анімації: властивість animation-fill-mode

Властивість animation-fill-mode визначає, які значення застосовуються анімацією поза часом її виконання. Коли анімація завершується, елемент повертається до своїх вихідним стилям. За замовчуванням анімація не впливає на значення властивостей, коли анімація застосовується до елементу - animation-name і animation-delay. Крім того, за замовчуванням анімація не впливає на значення властивостей після її завершення - animation-duration і animation-iteration-count. Властивість animation-fill-mode може перевизначити цю поведінку.

Властивість не успадковується.

синтаксис

Animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none;

10. Короткий запис анімації: властивість animation

Всі параметри відтворення анімації можна об'єднати в одну властивість - animation, перерахувавши їх через пробіл:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

Для відтворення анімації досить вказати тільки два властивості - animation-name і animation-duration, інші властивості приймуть значення за замовчуванням. Порядок перерахування властивостей не має значення, єдине, час виконання анімації animation-duration обов'язково має стояти перед затримкою animation-delay.

11. Множинні анімації

Для одного елемента можна задавати декілька анімацій, перерахувавши їх назви через кому:

Div (animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s;)

Можна керувати тривалістю анімації, повторенням, напрямком, типом руху і кроками. Анімувати можна будь-які елементи, в тому числі псевдо-елементи.

Обов'язкова умова - наявність конкретних значень. Властивості зі значенням auto НЕ анімуються.

Сафарі в даний час не підтримує анімацію псевдоелементів, для перегляду запису скористайтеся іншими браузерами

Приклад Css-анімації:

Приклад коду анімації:

@keyframes move (40% (left: 50%; bottom: 75%; animation-timing-function: ease-in;) 80% (left: 90%; bottom: -10em;))

Підключення анімації:

Sun (animation: move 15s infinite linear;)

move - ім'я анімації 15s - тривалість infinite - нескінченне повторення linear - тип руху

@keyframes

Сама анімація задається всередині блоку @keyframes. Після @keyframes задається ім'я анімації, а потім всередині фігурних дужок- її кроки.

Кроки можна задавати через відсотки або за допомогою ключових слів from і to. При цьому в кроках можна змінювати тип анімації (animation-timing-function):

Animation-name

Використовується для завдання імені анімації.

Можливі значення: одне або кілька імен анімації. Значення за замовчуванням: немає.

animation-name: move; - одна анімація. animation-name: move, sun-color; - дві анімації, імена задаються через кому.

Animation-duration

Тривалістю анімації управляє властивість animation-duration.

Можливі значення: час в секундах (s) або мілісекундах (ms). У разі декількох анімацій час для кожної з них можна задати через кому. Початкове значення - 0s.

Animation-timing-function

Властивість визначає тип анімації.

Можливі значення:

плавна анімація ease - ковзання (значення за замовчуванням) linear - рівне рух ease-in - прискорення до кінця ease-out - прискорення на початку ease-in-out - більш плавне ковзання, ніж ease

cubic-bezier (число, число, число, число) дозволяє задавати складний тип анімації. Значення зручно підбирати на cubic-bezier.com.

cubic-bezier (.24,1.49, .29, -0.48);

покрокова анімація step-start і step-end - дозволяють задати покрокову анімацію, обов'язково ставити конкретні кроки. При цьому з step-start зміни відбуваються на початку кроку, а з step-end - в кінці.

step-end. Якщо виставити step-start, лічильник буде починатися з одиниць.

steps (число) - дозволяє задати кількість кроків, за які буде виконана анімація, при цьому можна задати тільки останній крок без необхідності вказувати проміжні.

Animation-iteration-count

Управляє повторенням анімації. Значення за замовчуванням: 1 (анімація програється один раз).

Можливі значення:

число - скільки разів програти анімацію. infinite - нескінченне повторення.

Animation-direction

Відповідає за напрямок анімації.

Можливі значення:

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

Animation-play-state

Управляє зупинкою і програванням анімації.

Можливі значення: running - анімація програється (значення за замовчуванням). paused - анімація застигає на першому кроці.

Управляти кроком, де буде зупинка, не виходить, але можна зупиняти анімацію по: hover:

Animation-delay

За допомогою animation-delay можна задавати затримку анімації перед початком відтворення.

Можливі значення: час в секундах (s) або мілісекундах (ms). Значення можуть бути негативними. У разі декількох анімацій час для кожної з них можна задати через кому. Початкове значення - 0s.

Animation-fill-mode

Властивість визначає чи буде анімація впливати на елемент поза часом відтворення анімації.

Можливі значення:

none - анімація впливає на елемент тільки під час відтворення, після закінчення елемент повертається в початковий стан. forwards - анімація впливає на елемент після закінчення відтворення. backwards - анімація впливає на елемент до початку відтворення. both - анімація впливає на елемент і до початку, і після закінчення відтворення.

Щоб побачити як backwards і both працюють до початку відтворення анімації, задана затримка animation-delay: 3s; . Так само для цього має сенс відкрити приклад в новому вікні.

Всі ці властивості можна записати за допомогою короткої записи, наприклад:

Animation: timing 5s infinite alternate;

Обов'язкові значення - ім'я анімації і тривалість. Перше тимчасове значення вважається тривалістю відтворення, друге - затримкою.

Властивість animation-delay встановлює час очікування перед запуском циклу анімації. Значення 0s або 0ms запускає анімацію відразу ж. Негативне значення також включає анімацію без затримок, але може привести до зміни виду початку анімації.

Припустимо вказувати кілька значень, перераховуючи їх через кому.

коротка інформація

синтаксис

animation-delay:<время> [,<время>]*

CSS-анімація не обов'язково повинна починатися миттєво після її ініціалізації. Ви можете управляти її початком за допомогою властивості transition-delay. Щоб відкласти вчинення переходу на певний час, вкажіть його в значенні властивості:

Transition-delay: 1s; / * Відкласти початок анімації на одну секунду * /

Дана властивість мало використовується при реалізації простої інтерактивності на сайті, проте воно може бути вельми корисним, якщо вам необхідно створювати більш складні ефекти. За аналогією з transition-duration можна записати час затримки для кожного властивості, зазначеного в transition-property (при цьому також важливо дотримуватися порядку перерахування):

Transition-property: color, background-color, letter-spacing; transition-duration: 1s, .5s, 2s; transition-delay: 0s, 0s, 2s; / * Затримка анімації letter-spacing на 2 секунди * /

Не забувайте про кросбраузерності - абсолютно все властивості сімейства transitionвимагають використання Вендорний префіксів:

Webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s;

Практичне застосування

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

Можливо, ви помічали, що на деяких сайтах випадають підміню зникають дуже швидко, при цьому складно зловити потрібну посилання і клацнути по ній. Запобігти таку поведінку як раз і допомагає властивість transition-delay, встановлене для звичайного елемента і для елемента з псевдоклас: hover. Значення будуть відрізнятися: для звичайного стану властивість transition-delay повинно мати значення більше нуля, а для стану наведеного курсора воно повинно дорівнювати 0. Приклад:

Submenu (opacity: 0; transition-property: all; transition-duration: .5s; transition-delay: 1s;) .menu: hover .submenu (opacity: 1; transition-delay: 0s;)

Даний код призведе до того, що поява меню при наведенні курсору буде відбуватися без затримки, а зникнення затримається на одну секунду. Такий трюк однозначно зробить меню зручнішим для використання.

Browser compatibility

The compatibility table on this page is generated from structured data. If you "d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub