
Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.
Анімація надає сайтам динамічність. Вона пожвавлює веб-сторінки, покращуючи взаємодію з користувачем. На відміну від CSS3-переходів, створення анімації базується на ключових кадрах, які дозволяють автоматично відтворювати і повторювати ефекти упродовж заданого часу, а також зупиняти анімацію усередині циклу.
Щоб використати анімацію в проекті, треба зробити дві речі:
- Створити анімацію.
- Зв’язати її з елементом, що анімується, і вказати потрібні властивості.
Анімація – це набір ключових кадрів, або кейфреймів, що зберігаються в 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-анімація добре підтримується браузерами. З актуальною інформацією можна ознайомитися, поглянувши на цю таблицю:
Матеріали для подальшого вивчення
- animate.css – найпопулярніша бібліотека для роботи з анімаціями;
- effeckt.css – ще одна відома бібліотека;
- інтерактивна шпаргалка;
- детальна документація від Mozilla;
- bounce.js – бібліотека для створення класних ефектів.
Також у вивченні анімації вам допоможе цей англомовний курс:
От і все! Можливо, якісь моменти ми не врахували, але за допомогою матеріалів, вказаних вище, ви зможете зробити це самостійно. Успіхів в подальшому вивченні веб-програмування!
Адаптований переклад статті “CSS 3 Animation Step by Step”
Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?