Анімація інтерфейсів за допомогою CSS. CSS анімація для найменших Css кілька анімацій

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

Іншими словами, анімація дозволяє нам переходити від одногостану (набору властивостей) до другому, від другогодо третьому, і навіть за необхідності відтворювати анімацію у зворотному порядку, коли кількість переходів завершено.

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

Етапи створення анімації

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

• Перший- Визначає початкове положення елемента.
• Другий- Визначає положення елемента після зміщення елемента до середини вікна.
• Третій- Визначає кінцеву точку анімації (початкове положення елемента).

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

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

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

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

Визначення ключових кадрів

Результат нашого прикладу:

Розглянемо наступний приклад, у якому ми створимо кілька різних анімацій і призначимо їх одному елементу.

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

Результат нашого прикладу:

Кількість анімаційних циклів

За промовчанням будь-яка анімація в CSS буде відтворена тільки один раз. Завдяки властивості animation-iteration-count ми зможемо вказувати скільки разів програватиметься анімаційний цикл, це може бути як довільне число разів, або вказати, що анімація відтворюватиметься нескінченно, в деяких випадках це дуже корисно.

Зверніть увагу на те, що забороняється вказувати від'ємні значення з об'єктивних причин, але допускається вказувати не цілі значення, при цьому програватиметься лише частина анімаційного циклу - пропорційно до зазначеного значення (наприклад, значення 1.5 відповідає відтворенню анімаційного циклу півтора рази).

Розглянемо наступний приклад:

У цьому прикладі ми створили просту анімацію, в якій з допомогою CSSвластивості top зміщуємо елементи з відносним позиціонуванням щодо верхнього краю поточної позиції, змінюючи колір заднього фону елемента.

Вітаю, друзі! Сьогодні ми розглянемо найцікавішу тему – створення CSS анімацій на реальному прикладі. Кульмінацією цього уроку буде створення красивою CSSанімації логотип на мільйон доларів.

Класнути

Запинити

Матеріали уроку

• Вихідники: Завантажити
• Базовий приклад з уроку: https://codepen.io/agragregra/pen/PKNavm
• Стартовий шаблон з уроку: https://github.com/agragregra/optimizedhtml-start-template

Трохи теорії

Перш, ніж розпочати створення анімованого прикладу, слід звернутися до основ CSS анімації, розглянути базові терміни, властивості та правила створення CSSанімацій.

Якщо у вас вже був досвід створення анімацій у будь-яких додатках, таких як Adobe After Effects або старий Flash Professional (нині Adobe Animate), то вам повинні бути знайомі такі поняття, як «Ключові кадри», «Тимчасові функції або динаміка руху », які, як і в будь-якій іншій сфері анімації, застосовні і до анімації елементів на сторінці за допомогою CSS. Однак, на відміну від роботи з інтерфейсами програм, ви створюєте вашу CSS анімацію за допомогою написання коду в редакторі.

CSS правило @keyframes

Створення анімації CSS починається з оголошення імені анімації в блоці @keyframesта визначення так званих кроків анімації чи ключових кадрів.

Для розгляду теорії та основ ми будемо використовувати чистий CSS, а надалі вже на більш складному прикладі підключимо використання Sass препроцесора. Докладніше дізнатися про Sass ви можете в уроці. Крім того, для більш глибокого розуміння основ CSS також рекомендую ознайомитися з уроками «Основи CSS - Посібник для найменших» та «Всі CSS селектори в одному уроці»

Давайте розглянемо структуру @keyframes та роботу з ключовими кадрами на простому прикладі:

@keyframes turning ( 0% ( border-radius: 0 0 0 0; transform: rotate(0deg); ) 25% ( border-radius: 50% 0 0 0; transform: rotate(45deg); ) 50% ( border- radius: 50% 50% 0 0; transform: rotate(90deg); 75% ( border-radius: 50% 50% 0; % 50% 50%;

У першому рядку ми бачимо, що після ключового слова @keyframes йде його назва "turning". Це і є найменування блоку кеймфреймів, до якого ми звертатимемося далі.

Після оголошення відкривається фігурна дужка (у цьому прикладі на чистому CSS), в якій послідовно від 0% до 100% прописуються властивості кожного ключового кадру. Зверніть увагу, що між 0% і 100% ви можете вставляти скільки завгодно проміжних значень, 50%, 75% або навіть 83%. Це дуже схоже на таймлайн програми для створення анімації, де між двома станами можна додати будь-яке проміжне.

Далі цей блок коду з ключовими кадрами можна застосувати до будь-якого CSS селекторуАле найчастіше вони готуються для конкретного селектора, якщо ми хочемо досягти певної поведінки саме від потрібного блоку.

Звернення до блоку ключових кадрів

Після того, як ми задали ключові кадри для об'єкта (у житті це робиться паралельно або навіть після звернення до блоку з ключовими кадрами), можна звернутися до нашого нового блоку. Давайте подивимося на наступний простий код із прикладу вище:

Div ( width: 120px; height: 120px; background-color: violet; margin: 100px; animation: turning 2s ease-out 1s infinite alternate; )

Нічого особливого до останнього рядка. Тут ми визначаємо те, як виглядатиме об'єкт спочатку і в останньому рядку блоку звертаємося до блоку ключових кадрів з найменуванням «turning»:

Animation: turning 2s ease-out 1s infinite alternate;

Якщо з визначенням ключових кадрів все відносно зрозуміло, то цей рядок потребує негайного пояснення. Як ми бачимо, спочатку йде CSS властивість"animation". Це скорочена форма запису, як, наприклад, властивість «margin: 20px 30px 40px 50px», яку можна розділити на кілька окремих властивостей:

За цією аналогією, складову властивість «animation» можна розділити на кілька окремих властивостей:

Найчастіше досвідчені розробники не пишуть всі ці властивості окремо, а використовують короткий запис та структура її така:

animation: (1. animation-name - назва) (2. animation-duration - тривалість) (3. animation-timing-function динаміка руху) (4. animation-delay - пауза перед стартом) (5. animation-iteration-count - кількість виконань) (6. animation-direction - напрямок)

Animation: animationname 2s linear 1s infinite reverse

З прикладу бачимо, що ми звертаємося до блоку @keyframes animationname, задаємо тривалість виконання анімації 2 секунди, динаміка лінійна, пауза перед запуском становить 1 секунду, повторюється анімація нескінченно і виконується у зворотний бік.

Як я вже говорив раніше, починається короткий запис з якості « animation», після чого йдуть значення, послідовність яких краще не забувати, щоб не виникало плутанини при написанні анімації CSS.

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

Чим ближче ми наближаємося до початку роботи інтерфейсу, тим зрозумілішим він стає для користувача. У житті практично нічого не відбувається миттєво - відкриваючи банку газування або заплющуючи очі перед сном ми спостерігаємо купу проміжних станів, а не різке "відкрито/закрито", як це відбувається в Інтернеті.

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

Анімація - це набір ключових кадрів або кейфреймів, що зберігаються в CSS:

@keyframes animation-test ( 0% ( width: 100px; ) 100% ( width: 200px; ) )

Розберемо, що тут відбувається. Ключове слово @keyframes означає саму анімацію. Потім йде ім'я анімації, у нашому випадку - animation-test. У фігурних дужках міститься список кейфреймів. Ми використовуємо початковий кадр 0% та кінцевий 100% (їх також можна записати як from і to).
Погляньте на код нижче. Анімацію можна задати і таким чином:

@keyframes animation-test ( from ( width: 0; ) 25% ( width: 75px; ) 75% ( width: 150px; ) to ( width: 100%; ) )

Пам'ятайте, якщо початкові або кінцеві кадри не вказані, браузер визначить їх автоматично, ніби до них не була застосована анімація.

Підключити анімацію до елемента можна так:

Element-selector ( animation-name: your-animation-name; animation-duration: 2.5s; )

Властивість animation-name визначає ім'я для анімації @keyframes . Правило animation-duration визначає тривалість анімації в секундах (1s, 30s, .5s) або мілісекундах (600ms, 2500ms).

Також можна групувати кейфрейми:

@keyframes animation-test ( 0%, 35% ( width: 50px; ) 75% ( width: 200px; ) 100% ( width: 100%; ) )

До одного елемента (селектора) можна застосувати кілька анімацій. Їхні імена та параметри повинні бути записані в порядку застосування:

Element-selector ( animation-name: anim-name-1, anim-name-2; animation-duration: 1s, 3s; )

Затримка анімації:

Властивість animation-delay задає затримку перед відтворенням анімації в секундах або мілісекундах:

Element-selector ( animation-name: anim-name-1; animation-duration: 3s; animation-delay: 2s; /* перед запуском анімації пройде 2 секунди */ )

Повторне відтворення анімації:

Використовуючи animation-iteration-count, ми можемо вказувати число повторів анімації: 0, 1, 2, 3, і т.д. Або infinite для зациклювання:

Element-selector ( animation-name: anim-name-1; animation-duration: 3s; animation-delay: 4s; animation-iteration-count: 5; /* анімація відтворюється 5 разів */ )

Стан елемента до та після анімації:

За допомогою якості animation-fill-mode можна вказувати, в якому стані елемент перебуватиме до початку анімації і після завершення:

animation-fill-mode: forwards;- елемент анімації перебуватиме у стані останнього кейфрейму після завершення/відтворення;

a nimation-fill-mode: backwards;- елемент перебуватиме у стані першого кейфрейму;

animation-fill-mode: both; - перед початком анімації елемент перебуватиме у стані першого кейфрейму, після завершення – у стані останнього.

Запуск та зупинка анімації:

За це відповідає властивість animation-play-state, яка може приймати два значення: running або paused.

Element-selector:hover ( animation-play-state: paused; )

Напрямок анімації:

Властивість animation-direction вказує на те, як керувати напрямком відтворення анімації. Ось можливі значення:

animation-direction: normal; - анімація відтворюється у прямому порядку;

animation-direction: reverse; - анімація відтворюється у зворотному порядку, від to до from;

animation-direction: alternate;- парні повтори анімації відтворюються у зворотному порядку, непарні - у прямому;

animation-direction: alternate-reverse; - непарні повтори анімації відтворюються у зворотному порядку, парні - у прямому.

Функція плавності виведення анімованих кадрів:

Властивість animation-timing-function дозволяє встановити спеціальну функцію, що відповідає за швидкість відтворення анімації. За замовчуванням, анімація починається повільно, швидко розганяється і сповільнюється в кінці. Зараз у нас існують такі визначені значення: linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end.

Однак, ви можете створювати такі функції самостійно. Значення animation-timing-function: cubic-bezier(P1x, P1y, P2x, P2y); приймає на вхід 4 аргументи та будує криву розподілу процесу анімації.

Вивчити детальніше або випробувати створення цих функцій можна на сайті http://cubic-bezier.com

І, нарешті, анімацію можна розбити на набір окремих значень (кроків) за допомогою функції steps, яка приймає на вхід кількість кроків і напрямок (start або end). На прикладі нижче анімація складається з 5 кроків, останній з яких відбудеться перед завершенням анімації:

Element-selector ( animation-name: anim-name-1; animation-duration: 3s; animation-delay: 5s; animation-iteration-count: 3; animation-timing-function: steps(5, end); )

Підтримка браузерів для анімації:

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

Значення з -webkit-, -moz- або -O- вказує першу версію, яка працювала з префіксом.

На сайті https://www.w3schools.com можна докладніше вивчити CSS анімації (з прикладами).
Одна з найпопулярніших бібліотек для роботи з анімаціями - animate.css.

Може здатися, що проблеми з якими стикаєшся при роботі з CSS анімаціями не виправдані. Але це зовсім не так.

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

По-друге, гнучкість, швидкість і простота впровадження CSSанімацій допоможе “вдихнути життя” у існуючі чи нові інтерфейси. Розробивши загальні та оригінальні підходи, розібравшись особливо технології, можна робити унікальні юзабіліті інтерфейси майже для всіх проектів.

Сподіваюся, у статті ви знайшли корисну інформаціюдля себе. Всім красиві сайти. Не забувайте про анімашки:)

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 для 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;

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