Анімаційні ефекти

1.

Анімаційні ефекти
HTML
CSS

2.

• Анімація є одним із трендів у дизайні веб-інтерфейсів, невід’ємна
частина будь-якого сайта.
Анімаційні ефекти можна застосовувати до окремих об'єктів:
кнопок, списків, меню, а також до зображень.

3.

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

4.

CSS
Складається з двох компонентів:
1. Стилю, котрий описує CSS-анімацію,
2. Набору ключових кадрів (keyframes), які задають
початковий і кінцевий стани стилю анімації (з
можливістю задання точок проміжного стану).

5.

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

6.

Для створення анімації засобами CSS, використовуйте властивість
animation разом з правилом @keyframes, яке встановлює візуальні
ефекти для анімації.
• Зверніть увагу, що порядок у визначенні властивості має дуже важливе значення.
Перше значення у формі часу, розглядається як animation-duration, а друге - як
animation-delay.
• Порядок також важливий для визначення animation-name серед інших значень. Під
час аналізування правил, ключові слова допустимі лише для властивостей відмінних
від animation-name, і значення яких не було задані раніше, будуть прийняті саме для
них, а не для animation-name. Крім того, мають бути задані значення без задання
для всіх властивостей, щоб була можливість визначити animation-name.
• Нотатка:
Завжди вказуйте властивість animation-duration (тривалість анімації), в іншому
випадку тривалість дорівнює 0, і тому анімація не буде відтворюватися.

7.

CSS властивість animation-name
• Властивість animation-name встановлює одну або кілька анімацій,
які застосовуються до елементу. Являє собою ім'я пов'язане з
правилом @keyframes, воно в свою чергу задає послідовність
руху.
рядок, який пов'язаний з анімацією. Ідентифікатор повинен
keyframename Текстовий
починатися з літери або підкреслення (_), також може містити цифри від 0
до 9 і дефіс (-). Заборонено використовувати зарезервовані ключові слова
none, unset, inherit, initial
none
Вимикає анімацію
initial
Встановлює властивість у значення без задання
inherit
Вказує на спадковість властивості від свого батьківського елемента (якщо
відповідна властивість встановлена)

8.

CSS властивість animation-duration
• Властивість animation-duration задає час в секундах або мілісекундах, скільки повинен тривати
один цикл анімації. Без задання значення дорівнює 0s, це означає, що ніякої анімації немає.
• Можна вказати кілька значень, перераховуючи їх через кому. Негативні значення і значення без
вказівки одиниць часу (s або ms) неприпустимі і будуть ігноруватися.
• animation-duration приймає в якості значення час. Наприклад, 3s задає, що один цикл анімації
демонструватиметься протягом 3 секунд. Більші значення роблять анімації більш плавнішими,
менші - роблять анімації швидшими.
time
Визначає тривалість анімації
initial
Встановлює властивість у значення без задання
inherit
Вказує на спадковість властивосі від свого
батьківського елемента

9.

CSS властивість animation-timing-function
• Властивість animation-timing-function визначає криву швидкості анімації кожного циклу між
ключовими кадрами. В якості значень для властивості використовуються часові функції
додані в CSS3.
• Вона являє собою математичну функцію, яка показує, як швидко з часом змінюється
значення властивості. Початкова точка має координати 0.0, 0.0, кінцева - 1.0, 1.0, при цьому
функція по осі ординат може перевищувати ці значення в більшу чи меншу сторону.
• На відмінну від @keyframe ця властивість впливає лише на демонстрацію циклів між
ключовими кадрами, а не на анімацію цілком!
linear
Однакова швидкість від початку і до кінця
ease
Анімація починається повільно, потім прискорюється і до кінця руху знову
сповільнюється.
ease-in
Анімація повільно починається, до кінця прискорюється.
ease-out
Анімація починається швидко, до кінця сповільнюється.
ease-in-out
Анімація починається і закінчується повільно.

10.

css властивість animation-delay
• Властивість animation-delay встановлює час очікування перед запуском циклу анімації. Значення 0s
або 0ms запускає анімацію відразу ж. Негативне значення також вмикає анімацію без затримок, але
може привести до зміни виду початку анімації. Наприклад, задаючи значення 5s, ми встановлюємо,
що анімація запуститься після 5-ти секунд очікування.
• Ви можете запустити анімацію у конкретний момент в майбутньому, відразу після її присвоєння
елементу або відразу після початку циклу демонстрації анімації.
• Допустимо вказувати кілька значень, перераховуючи їх через кому.
time
Необов`язково. Визначає кількість секунд/мілісекунд до початку анімації
initial
Встановлює властивість у значення без задання
inherit
Вказує на спадковість властивості від свого батьківського елемента

11.

css властивість animation-iteration-count
• Властивість animation-iteration-count визначає скільки разів
програвати цикл анімації до її зупинки.
• Наприклад, якщо задати для властивості значення 5 - анімація
програватиметься 5 циклів.
• Значення infinite робить демонстрацію анімації нескінченною.
number
Скільки разів повинна повторюватися анімація. Негативні значення не припустимі.
Можна використовувати числа менше одиниці, для прикладу 0.5 означатиме
половину циклу анімації
infinite
Анімація повторюється нескінченно
initial
Встановлює властивість у значення без задання
inherit
Вказує на спадковість властивостей від свого батьківського елемента

12.

CSS властивість animation-direction
• Властивість animation-direction визначає напрямок анімації:
анімація може демонструватися тільки в одному напрямку або в
обох, чергуючи назад і вперед.
normal
Анімація йде з самого початку, після завершення циклу повертається до
вихідного стану
reverse
Анімація йде з кінця до початку, потім плавно повертається у вихідне
положення
alternate
Анімація йде циклічно з початку до кінця, а потім з кінця до початку.
alternate-reverse Анімація йде циклічно з кінця до початку, а потім з початку до кінця.
initial
Встановлює властивість у значення без задання
inherit
Вказує на спадковість властивостей від свого батьківського елемента

13.

css властивість animation-fill-mode
• Властивість animation-fill-mode визначає, які стилі повинні застосовуватися до елементу, коли анімація не
відтворюється. Наприклад, після її завершення або при зупинці. Без задання, в момент закінчення анімації
стиль елемента повертається до вихідного, властивість animation-fill-mode дозволяє змінити цю поведінку і
зробити так, щоб стиль елемента залишався як у останнього ключового кадру.
• Наприклад, якщо ви робите виїжджаюче від краю вікна браузера повідомлення, то після закінчення анімації
повідомлення повернеться назад за край екрана. Значення forwards властивості animation-fill-mode змінює
цю поведінку і залишає стиль на момент завершення руху. Таким чином, повідомлення плавно висунеться зза краю вікна і залишиться на місці.
none
До елементу не буде застосовано ніяких стилів.
forwards
До елементу по закінченню анімації застосовується стиль останнього ключового
кадру. Яким буде цей кадр в послідовності анімації залежить від комбінації
значень властивостей animation-direction і animation-iteration-count
backwards
До елементу застосовується стиль першого ключового кадру і він залишається
на протязі періоду заданого animation-delay. Перший ключовий кадр визначається
на підставі значення animation-direction
both
До елементу застосовуються обидва правила, як для forwards, так і для backwards

14.

css властивість animation-play-state
• Властивість animation-play-state визначає, програвати анімацію чи поставити
її на паузу. При продовженні встановленої на паузі анімації вона починається
з того моменту де була зупинена.
• Демонстрація анімації може бути призупинена, якщо для властивості
animation-play-state задано значення paused. Щоб продовжити
демонстрацію, встановіть для неї значення running.
paused
Призупинити анімацію.
running
Програвати анімацію. Без задання
initial
Встановлює властивість у значення без задання
inherit
Вказує на спадковість властивості від свого батьківського
елемента (якщо відповідна властивість встановлена)

15.

Порядок дій створення CSS-анімації
Крок 1
• оголошення імені анімації в блоці @keyframes і
визначення так званих кроків анімації, або ключових
кадрів.
Крок 2
• послідовно від 0 до 100 % прописуються властивості для
кожного ключового кадру. Між цими значеннями можна
вставляти скільки завгодно проміжних значень
Крок 3
• використання CSS властивості animation.

16.

Створимо нову сторінку portfolio.html

17.

/*Ключові кадри from to */

18.

/*Ключові кадри у відсотках*/

19.

Animation налаштування

20.

21.

Скорочений запис animation