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

Анімація у веб-дизайні

Анімація як правило асоціюється з мультиплікацією або створенням відео. У веб-середовищі теж є поняття анімації. Елементи на сторінці можуть змінювати положення, прозорість, форму, розміри і так далі.

Слово "анімація" походить від латинського "аніма", тобто "душа". Простіше кажучи, анімація допоможе вдихнути душу в сторінки вашого сайту, зробити його більш живим і зрозумілим для користувача. На зорі веб-анімації, найпростіші гіфки, миготливі зображення використовувалися з декоративною метою - щоб розважити користувача та й просто виділитися серед конкурентів. Зараз анімаційні ефекти приносять користь - а саме покращують юзабіліті сайту. UX / UI дизайн (дизайн інтерфейсу користувача) спрямований на те, щоб користувачеві було зручно і приємно. Анімація - частина цього дизайну.

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

Види анімації

Анімовані об'єкти

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

Анімовані зображення

Найпростіший приклад - анімовані рекламні банери на сайті. Вони можуть вести на картки товарів, внутрішні сторінки, блог або перенаправляти відвідувача на інший сайт - який замовив у вас рекламу.

Ще приклад - слайд-шоу з фотографій. Зазвичай використовується на сайтах, де товар, або послуги подані у вигляді фотографій. Наприклад, жіночий одяг, прикраси, види заморської природи і пам'яток, які пропонує туристичне агентство. Сучасні можливості анімації дозволяють зробити найрізноманітніші слайдери: на повний екран, з 3D-ефектами, адаптивні (які проглядаються з будь-яких мобільних пристроїв) та інші.

Анімований текст

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

Всі ці види анімацій можуть бути різні по оформленню та дії.

Основні прийоми анімації

миготіння;
фокусування;
зміна кольору;
обертання;
спалах, пульсація;
погойдування;
ковзання;
комбіновані варіанти і інші.

Технології створенні анімації на веб-сторінках

Інтегрувати анімацію з сайтом можна за допомогою декількох способів:

код HTML;
код CSS;
код JavaScript;
gif-анімація;
flash-анімація.

CSS-анімація

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

Анімація переходів

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

Ви можете визначити:

transition-property: які властивості анімуються;
transition-duration: тривалість анімації;
transition-timing-function: як обчислюються проміжні стани;
transition-delay: час затримки анімації.

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

Перехід являє собою специфічний вид анімації, де є тільки початковий і кінцевий стан.

Приклад 1 (розгорніть, щоб переглянути код)

Переходи часто використовуються для стану :hover.

<!DOCTYPE html>

<html>

<head>

div {

background: lightgrey;

color: grey;

margin-right: 10px;

padding: 5px 10px;

transition: none;

cursor: pointer;

}

div:hover {

background: yellow;

color: red;

}

div.with-transition {

transition: 3s;

}

</style>

</head>

<body>

<div>Без переходу</div>

<div class="with-transition">З переходом тривалістю 3 секунди</div>

</body>

</html>

Щоб переглянути результат виконання вищенаведеного коду, наведіть курсор на блоки:

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

transition-duration

transition-duration є єдиною стильовою властивістю, необхідною для створення переходу. Вона може бути встановлена або в секундах (2s), або в мілісекундах (100ms).

Якщо ви хочете, щоб ваш перехід тривав півсекунди, то можете написати 0.5s або 500ms.

transition-property

Тільки третина властивостей CSS може бути анімована. На сайті Mozilla є повний список властивостей.

За замовчуванням у властивості transition-property значення all, це просто означає, що будуть анімовані всі можливі властивості.

Ви можете дозволити анімацію тільки однієї або декількох властивостей.

Приклад 2 (розгорніть, щоб переглянути код)

<!DOCTYPE html>

<html>

<head>

div {

background: lightgrey;

margin: 10px;

padding: 5px 10px;

transition: none;

cursor: pointer;

border: 3px solid blue;

}

div:hover {

background: yellow;

color: red;

border: 3px dotted green;

}

div.with-background-transition {

transition-duration: 2s;

transition-property: background;

}

div.with-all-transition {

transition: 3s;

}

</style>

</head>

<body>

<div>Без переходу</div>

<div class="with-background-transition">З переходом тривалістю 3 секунди тільки для фону</div>

<div class="with-all-transition">З переходом тривалістю 3 секунди для всіх властивостей</div>

</body>

</html>

Щоб переглянути результат виконання вищенаведеного коду, наведіть курсор на блоки:

transition-timing-function

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

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

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

Приклад 3 (розгорніть, щоб переглянути код)

<!DOCTYPE html>

<html>

<head>

div {

left: 0;

height: 20px;

width: 20px;

position: relative;

transition: 1s;

}

main:hover div {left: 300px;}

.ease {transition-timing-function: ease;} /* Поведінка за замовчуванням */

.linear {transition-timing-function: linear;} /* Постійна швидкість */

.ease-in {transition-timing-function: ease-in;}

.ease-out {transition-timing-function: ease-out;}

.ease-in-out {transition-timing-function: ease-in-out;}

div:nth-child(2) {background: crimson;}

div:nth-child(4) {background: midnightblue;}

div:nth-child(6) {background: mediumseagreen;}

div:nth-child(8) {background: orangered;}

div:nth-child(10) {background: darkviolet;}

</style>

</head>

<body>

<main>

<p><strong>ease</strong>: повільно починається, швидко в середині, повільно завершується</p>

<p><strong>linear</strong>: постійна швидкість</p>

<p><strong>ease-in</strong>: повільно починається, швидко завершується</p>

<p><strong>ease-out</strong>: швидко починається, повільно завершується</p>

<p><strong>ease-in-out</strong>: схоже на ease, але з більш вираженим прискоренням/уповільненням</p>

</main>

</body>

</html>

Щоб переглянути результат виконання вищенаведеного коду, наведіть курсор на блок:

Зверніть увагу, всі переходи у цьому прикладі займають однаковий час (1 секунду).

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

transition-delay

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

Як і з transition-duration ви можете використовувати секунди (s) або мілісекунди (ms).

Приклад 4 (розгорніть, щоб переглянути код)

<!DOCTYPE html>

<html>

<head>

div {

margin: 5px;

background: blue;

color: white;

padding: 5px 10px;

transition: all 1s;

}

div:hover {

background: red;

}

div.with-delay {

transition-delay: 2s;

}

</style>

</head>

<body>

<div>Без затримки</div>

<div class="with-delay">З затримкою 2 секунди</div>

</body>

</html>

Щоб переглянути результат виконання вищенаведеного коду, наведіть курсор на блок:

Отже, переходи в CSS є специфічним видом анімації, де:

є тільки два стани: початок і кінець;
анімація не зациклена;
проміжні стани керуються тільки функцією часу.

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

Переходи - це просто спосіб анімації стильових властивостей від початкового до кінцевого стану.

Але якщо потрібно:

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

Анімація в CSS дозволяє все це, і не тільки.

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

Властивості анімації

Як і transition, властивість animation є скороченим для кількох інших:

animation-name: назва анімації;
animation-duration: як довго триває анімація;
animation-timing-function: як обчислюються проміжні стани;
animation-delay: анімація починається через деякий час;
animation-iteration-count: скільки разів повинна виконуватися анімація;
animation-direction: має рух йти у зворотний бік чи ні;
animation-fill-mode: які стилі застосовуються до початку анімації і після її завершення.

@keyframes

Правило @keyframes встановлює ключові кадри при анімації елемента.

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

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

Найпростіший варіант, коли у нас є тільки два ключових кадри - вихідний і кінцевий стан.

Приклад 5 (розгорніть, щоб переглянути код)

<!DOCTYPE html>

<html>

<head>

div {

background: green;

position: relative;

width: 50px;

height: 50px;

animation: box 5s;

}

@keyframes box {

from {left: 0px;}

to {left: 300px;}

}

</style>

</head>

<body>

</body>

</html>

В даному випадку ми даємо нашій анімації ім'я box, воно потім буде задіяне у властивості animation і визначаємо, що елемент буде змінювати значення властивості left від 0 до 300 пікселів. Замість ключових слів from і to можна використовувати, відповідно, 0% і 100%.

Ключові кадри не обов'язково повинні починатися з 0% і закінчуватися 100%. Анімація тоді буде відбуватися не відразу.

@keyframes box {

50% {left: 0px;}

100% {left: 300px;}

}

Запис (синтаксис) правила @keyframes

@keyframes змінна {

from або відсотки {властивість: значення;}

відсотки (якщо є проміжні стани){властивість: значення;}

to або відсотки {властивість: значення;}

}

Змінна - унікальна змінна, яка пов'язує @keyframes з animation, через цю властивість налаштовується час анімації і інші її параметри.

from - перший ключовий кадр, аналогічний 0%.

to - останній ключовий кадр, аналогічний 100%.

Відсотки - встановлює ключовий кадр у відсотках від часу всієї анімації.

Ви можете визначити стільки ключових кадрів, скільки хочете, наприклад 33%, 4% або навіть 29.86%. Кожен ключовий кадр є правилом CSS, це означає, що ви можете писати властивості CSS як зазвичай.

Приклад 6 (розгорніть, щоб переглянути код)

<!DOCTYPE html>

<html>

<head>

@keyframes around {

0% {left: 0; top: 0;}

25% {left: 240px; top: 0;}

50% {left: 240px; top: 140px;}

75% {left: 0; top: 140px;}

100% {left: 0; top: 0;}

}

p {

animation: around 4s linear 0s infinite;

background: green;

color: white;

height: 60px;

line-height: 60px;

margin: 0;

position: absolute;

text-align: center;

width: 60px;

}

</style>

</head>

<body>

<p>Привіт!</p>

</body>

</html>

Зверніть увагу, що початок 0% і кінець 100% містять однакові правила CSS. Це гарантує, що анімація зациклиться ідеально. Оскільки лічильник ітерацій встановлений як infinite, то анімація буде йти від 0% до 100%, а потім відразу назад до 0% і так безкінечно.

Примітка

Chrome до версії 43, Opera до версії 30, Safari до версії 9 і Android підтримують @ -webkit-keyframes.

Firefox до версії 16 підтримує @ -moz-keyframes.

animation-name

Назва анімації використовується, принаймні, двічі:

при написанні анімації за допомогою @keframes;
при використанні анімації за допомогою властивості animation-name (або через скорочене властивість animation).

@keyframes whatever {

/ * ... * /

}

.selector {animation-name: whatever; }

Подібно іменам класів CSS, назва анімації може включати в себе тільки:

літери (a-z);
цифри (0-9);
підкреслення (_);
дефіс (-).

Назва не може починатися з цифри або з двох дефісів.

animation-duration

Як і тривалість переходу, тривалість анімації може бути встановлена в секундах (1s) або мілісекундах (200ms).

.selector {animation-duration: 0.5s; }

Значення за замовчуванням дорівнює 0s, що означає відсутність анімації взагалі.

animation-timing-function

Подібно до функцій часу для переходів, функції часу для анімації можуть використовувати ключові слова, такі як linear, ease-out або можуть бути визначені за допомогою довільних кривих Безьє.

.selector {animation-timing-function: ease-in-out; }

Значення за замовчуванням: ease.

animation-delay

Як і з затримкою переходу, затримка анімації може бути встановлена в секундах (1s) або мілісекундах (200ms).

За замовчуванням дорівнює 0s, що означає відсутність будь-якої затримки.

Корисно використовувати, коли включається кілька анімацій в серії.

.a, .b, .c {animation: bouncing 1s; }

.b {animation-delay: 0.25s; }

.c {animation-delay: 0.5s; }

animation-iteration-count

За замовчуванням, анімація відтворюється тільки один раз (значення 1). Ви можете встановити три типи значень:

цілі числа, на зразок 2 або 3;
дробові числа, на зразок 0.5, які будуть відтворювати тільки половину анімації;
ключове слово infinite, яке буде повторювати анімацію нескінченно.

.selector {animation-iteration-count: infinite; }

animation-direction

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

normal: починається з 0%, закінчується на 100%, починається з 0% знову.
reverse: починається зі 100%, закінчується на 0%, починається зі 100% знову.
alternate: починається з 0%, йде до 100%, повертається на 0%.
alternate-reverse: починається зі 100%, йде до 0%, повертається на 100%.

Це легше уявити, якщо лічильник ітерацій анімації встановлений як infinite.

Приклад 7 (розгорніть, щоб переглянути код)

<!DOCTYPE html>

<html>

<head>

p{ color: grey;}

.normal div {animation-direction: normal;}

.reverse div {animation-direction: reverse;}

.alternate div {animation-direction: alternate;}

.alternate-reverse div {animation-direction: alternate-reverse;}

p:nth-child(1) strong {color: crimson;}

div:nth-child(2) div {background: crimson;}

p:nth-child(3) strong {color: midnightblue;}

div:nth-child(4) div {background: midnightblue;}

p:nth-child(5) strong {color: mediumseagreen;}

div:nth-child(6) div {background: mediumseagreen;}

p:nth-child(7) strong {color: goldenrod;}

div:nth-child(8) div {background: goldenrod;}

div {

background: white;

height: 20px;

width: 220px;

}

div div {

animation: swipe 2s linear infinite;

background: crimson;

height: 20px;

left: 0;

margin-top: -1rem;

position: relative;

transition: 1s;

width: 20px;

}

@keyframes swipe {

0% {left: 0;}

100% {left: 200px;}

}

</style>

</head>

<body>

<p><strong>normal</strong>: 0% --> 100%</p>

</div>

<p><strong>reverse</strong>: 100% --> 0%</p>

</div>

<p><strong>alternate</strong>: 0% <--> 100%</p>

</div>

<p><strong>alternate-reverse</strong>: 100% <--> 0%</p>

</div>

</body>

</html>

animation-fill-mode

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

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

animation-fill-mode дозволяє повідомити браузеру, якщо стилі анімації також повинні застосовуватися за межами анімації.

Трансформація в CSS

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

Перетворення (трансформація) в CSS є набором функцій, які дозволяють певним чином надавати елементу форму:

translate: переміщує елемент уздовж трьох осей (х, у і z);
rotate: обертає елемент навколо центральної точки;
scale: змінює розмір елемента;
skew: спотворює елемент.

Властивості трансформації

Є три доступних властивості для трансформації:

transform визначає, яка функція буде застосовуватися (translate, rotate, scale і ін.);
transform-origin дозволяє змінювати точку початку перетворення (працює як background-position);
transform-style для налаштування 3D.

Зверніть увагу, що на відміну від background і border, властивість transform не є скороченою.

Тут ми будемо використовувати тільки transform.

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

translate

Функція translate () надає користувачам можливість переміщати елемент в площині (по осях х та у).

Вона приймає або:

один параметр: переміщує елемент уздовж осі х;
два параметри: перше значення для осі х, друге для осі у.

Це схоже на використання відносного позиціонування за допомогою значень left і top.

Переробимо замкнуту анімацію (Приклад 6) за допомогою translate, замість позиціонування left / top:

@keyframes translating {

0% {transform: translate (0, 0); }

25% {transform: translate (240px, 0); }

50% {transform: translate (240px, 140px); }

75% {transform: translate (0, 140px); }

100% {transform: translate (0, 0); }

}

p {animation: translating 4s linear infinite; }

Варто пам'ятати: transform - це стильова властивість, translate () - це значення (і одночасно функція), що застосовується до цієї властивості.

Ви можете використовувати translateX () і translateY (), щоб перемістити елемент уздовж тільки осі х і у, відповідно.

rotate

Функція rotate () дозволяє обертати елемент навколо нерухомої точки. За замовчуванням, обертання відбувається навколо центру елемента.

rotate () приймає тільки один параметр, який є значенням кута і визначається в градусах (deg), градах (grad), радіанах (rad) або в оборотах (turn) (один оборот еквівалентний повному колу).

Приклад 8 (розгорніть, щоб переглянути код)

<!DOCTYPE html>

<html>

<head>

p {

animation: rotating 4s linear 0s infinite;

background: slateblue;

border-radius: 60px;

color: white;

height: 120px;

line-height: 120px;

margin: 0;

text-align: center;

width: 120px;

}

@keyframes rotating {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

</style>

</head>

<body>

<p>Привіт!</p>

</body>

</html>

scale

Функція scale () дозволяє змінювати розмір елемента. Вона може збільшити або зменшити елемент. Функція приймає або:

один параметр: зміна розмірів елемента однаково по висоті і ширині;
два параметри: перше значення змінює розмір елемента по горизонталі, друге по вертикалі.

Діапазон можливих значень:

1: елемент зберігає свій початковий розмір;
2: елемент подвоюється в розмірі;
0.5: елемент зменшується наполовину;
0: елемент в основному зникає (так як його висота і ширина дорівнюють нулю);
-1: елемент віддзеркалюється.

Приклад 9 (розгорніть, щоб переглянути код)

<!DOCTYPE html>

<html>

<head>

p {

animation: scaling-toggle 10s steps(1) 0s infinite forwards;

background: white;

color: grey;

left: 2rem;

margin: 0;

opacity: 0;

padding: 0 0.5em;

position: absolute;

top: 2rem;

z-index: 1;

}

p:first-child {left: 0; position: relative; top: 0;}

p:nth-child(2) {animation-delay: 2s;}

p:nth-child(3) {animation-delay: 4s;}

p:nth-child(4) {animation-delay: 6s;}

p:nth-child(5) {animation-delay: 8s;}

p strong {

content: "";

display: inline-block;

}

div {

animation: scaling 10s linear 0s infinite;

background: goldenrod;

border-radius: 60px;

color: white;

height: 120px;

line-height: 120px;

margin-top: 2rem;

text-align: center;

transition: all 100ms linear;

width: 120px;

}

@keyframes scaling {

0% {transform: scale(1);}

19% {transform: scale(1);}

20% {transform: scale(2);}

39% {transform: scale(2);}

40% {transform: scale(0.5);}

59% {transform: scale(0.5);}

60% {transform: scale(0);}

79% {transform: scale(0);}

80% {transform: scale(-1);}

99% {transform: scale(-1);}

100% {transform: scale(1);}

}

@keyframes scaling-toggle {

0% {opacity: 1;}

20% {opacity: 0;}

100% {opacity: 0;}

}

</style>

</head>

<body>

<p><strong>scale(1)</strong>: звичайний розмір</p>

<p><strong>scale(2)</strong>: подвійний розмір</p>

<p><strong>scale(0.5)</strong>: половина розміру</p>

<p><strong>scale(0)</strong>: нульовий розмір (невидимий)</p>

<p><strong>scale(-1)</strong>: відзеркалення</p>

<div>Масштаб</div>

</body>

</html>

Як і для translate (), у функції scale () є версії для х і у: scaleX () і scaleY (), для зміни розміру по горизонталі і вертикалі, відповідно.

skew

Функція skew () дозволяє викривляти елемент, зміщуючи його сторони вздовж ліній.

Ця функція перетворення використовується рідко, оскільки її наслідки дуже непередбачувані, а результат не обов'язково привабливий.

Як і scale (), функція skew () приймає або:

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

Як і rotate (), функція skew () приймає тільки значення кута, такого як градуси (deg).

Приклад 10 (розгорніть, щоб переглянути код)

<!DOCTYPE html>

<html>

<head>

@keyframes skewing {

0% {transform: skew(0deg);}

20% {transform: skew(10deg);}

40% {transform: skew(45deg);}

60% {transform: skew(90deg);}

80% {transform: skew(120deg);}

100% {transform: skew(0deg);}

}

p {

background-color: green;

color: white;

padding: 5px;

animation: skewing 10s steps(1) 0s infinite; }

</style>

</head>

<body>

<p>Привіт!</p>

</body>

</html>

3D-функції

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

Наприклад:

У translate () до двох параметрів:

translate (x)
translate (x, y)
translateX () тільки для осі х
translateY () тільки для осі у

Але для всіх цих функцій також є 3D-версії.

Наприклад, для translate () є версія translate3d (), яка виконує перетворення в трьох вимірах, а це значить, що вона також включає в себе вісь z (крім того існує окрема функція translateZ()).

Параметр z в основному змушує елемент рухатися ближче і далі, в залежності від зменшення або збільшення значення. Це як збільшення і зменшення масштабу.

Приклад 11 (розгорніть, щоб переглянути код)

<!DOCTYPE html>

<html>

<head>

#zoom-animation {perspective: 500px;}

#zoom-animation div,

#zoom-animation p {

background: midnightblue;

color: white;

height: 200px;

line-height: 200px;

margin: 0;

position: relative;

text-align: center;

width: 200px;

}

#zoom-animation p {

animation: zooming 5s alternate infinite both;

background: limegreen;

left: 2rem;

opacity: 0.7;

position: absolute;

top: 2rem;

}

@keyframes zooming {

0% {transform: translate3d(0, 0, 0);}

100% {transform: translate3d(0, 0, 200px);}

}

</style>

</head>

<body>

<div>Оригінал</div>

<p>Перетворення</p>

</div></body>

</html>

Практична частина

Вправа

Виконайте завдання по інструкції за зразком, використовуючи ефекти анімації:

Інструкція для роботи за посиланням: Google-диск