Ознайомлення з анімацією в CSS3: гайд для початківців

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

Щоб використати анімацію в проекті, треба зробити дві речі:

1. Створити анімацію.
2. Зв’язати її з елементом, що анімується, і вказати потрібні властивості.

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

@keyframes test - animation { 0% { width: 50px; } 100% { width: 150px; }}

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

Погляньте на код нижче. Анімацію можна задати і так:

@keyframes test - animation { from { width: 50px; } 30% { width: 99px; } 60.8% { width: 120px; } to { width: 150px; }}

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

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

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

element { animation-name: current - anim - name; animation-duration: 2s;}

Властивість animation - name задає ім’я для анімації @keyframes. Правило animation - duration задає тривалість анімації в секундах (3s, 65s, .4s) або мілісекундах (300ms, 1000ms).

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

@keyframes animation - name { 0%, 35% { width: 100px; } 100% { width: 200px; }}

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

element { animation-name: animation - 1, animation - 2; animation-duration: 2s, 4s;}

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

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

element { animation-name: animation - 1; animation-duration: 2s; animation-delay: 5s; // перед запуском анімації пройде 5 секунд}

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

За допомогою властивості ‘animation – iteration – count’ можна вказати число повторів анімації: 0, 1, 2, 3, . – або ‘infinite’ для зациклення:

element { animation-name: animation - 1;
animation-duration: 2s; animation-delay: 5s; animation-iteration-count: 3; // анімація відтвориться 3 рази}

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

Властивість ‘animation – fill – mode’ вказує, в якому стані елемент знаходитиметься до початку анімації і після її завершення:

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

У прикладі нижче, до трьох елементів застосовується одна і та ж анімація, розрізняється лише значення ‘animation – fill – mode’:

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

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

Напрям анімації

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

• ‘animation-direction: normal;’ – анімація відтворюється в прямому порядку, як завжди;
• ‘animation-direction: reverse;’ – анімація відтворюється в зворотному порядку, від ‘to’ до ‘from’;
• ‘animation-direction: alternate;’ – парні повтори анімації відтворюються в зворотному порядку, непарні – в прямому;
• ‘animation-direction: alternate – reverse;’ – непарні повтори анімації відтворюються в зворотному порядку, парні – в прямому.

Функція плавності виведення кадрів, що анімуються

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

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

Також анімацію можна розбити на набір дискретних значень за допомогою функції ‘steps (amount of steps, direction) ‘, яка приймає на введення кількість кроків і напрям (‘start’ або ‘end’). У наступному прикладі анімація складається з 7 кроків, останній з яких відбудеться прямо перед завершенням анімації:

element { animation-name: animation - 1; animation-duration: 2s; animation-delay: 5s; animation-iteration-count: 3; animation-timing-function: steps (7, end);}

Сумісність з браузерами

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

Я можу користуватися css – анімаціями? Дані про підтримку функції css-анімації в основних браузерах – caniuse.com.

Матеріали для подальшого вивчення

• animate.css – найпопулярніша бібліотека для роботи з анімаціями;
• effeckt.css – ще одна відома бібліотека;
• інтерактивна шпаргалка;
• детальна документація від Mozilla;
• bounce.js – бібліотека для створення класних ефектів.

Також у вивченні анімації вам допоможе цей англомовний курс:

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

Адаптований переклад статті “CSS 3 Animation Step by Step”