Анімація в CSS3

20

Від автора: вітаю вас, дорогий читачу. Сьогодні я вам розповім, як реалізовується в css3 анімація і як її можна використовувати вже зараз для різних ефектів на сайті.

УВАГА! Оскільки в цьому уроці ми з вами розберемо анімацію, на картинках я вам приклад її роботи продемонструвати не зможу, тому сміливо відкривайте редактор коду і записуйте туди код, наведений у цей статті.

Основи створення

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

Створюються самі ефекти переходів з допомогою @keyframes

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

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

Синтаксис @keyframes

Власне, мені простіше буде пояснити вам все на готовому прикладі, нехай і дуже простому. Ось він (код додається в css-файл):

@keyframes pulse{
0%{font-size: 50px;}
50%{font-size: 60px;}}
100%{font-size: 50px;}}

Анімація в CSS3

Отже, після ключевіков @keyframes йде довільне слово, яке буде виступати назвою анімації. У нашому випадку це «pulse». Далі відкриваються фігурні дужки, в яких записуються потрібні правила.

Відсотки, це так звані тимчасові позначки, на яких до елемента будуть додаватися зазначені властивості. У нашому випадку записане означає наступне: на самому початку виконання розмір шрифту буде становити 50 пікселів, в її середині він збільшитися до 60-ти, а в кінці знову зменшитися до початкового розміру.

Ключові слова from і to можуть замінити процентну запис, вони позначають 0% і 100% відповідно, тобто початок і кінець відтворення.

Застосовуємо анімацію в дії

Поки у нас просто код, який формує анімаційний ефект, але він ніде не застосовується. Якщо ви поновіть вашу веб-сторінку, на ній нічого не зміниться. Відповідно, щоб застосувати анімацію, потрібно виконати дві дії:

Вибрати елемент, для якого вона буде застосовуватися

Зв’язати його з правилами, описаними через @keyframes (за допомогою імені), а також задати додаткові параметри, якщо це буде необхідно.

Пробуємо

У своєму файлі html я створив блок із класом shadow, в якому розташовується проста рядок тексту. Наша мета – застосувати анімаційні ефекти, описані нами раніше, до цього текстового елемента.

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

Отже, крім тих стилів, що вже є у нашого блоку, додаємо нові:

animation-name: pulse;
animation-duration: 2s;

Таким чином, ми зв’язали елемент з описаної раніше анімацією, а також вказали її тривалість. Поновіть сторінку і ви переконаєтеся, що все вже працює – наш ефект дійсно виконається, але лише один раз.

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

animation-iteration-count: 4;

Таким чином, всі повторитися 4 рази, після чого припинитися. Як ви розумієте, замість чотирьох можна вписати будь-яке число.

Нескінченна анімація в css3

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

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

animation-iteration-count: infinite;

Все, тепер ми зробили нескінченний повтор. Перевіряти, чи це так, просидівши все життя за монітором, я не раджу. Просто це застосовується в тих випадках, коли ви хочете, щоб ефект постійно повторювався і не зникав. Якщо він ненав’язливий і не відволікає користувача, то чому б і ні.

Затримка перед початком

За замовчуванням відтворення починається після повного завантаження сторінки. Цим поведінкою можна керувати за допомогою властивості animation-delay. Його значення визначається в секундах.

Напрямок

Ще одна цікава властивість – animation-direction. За замовчуванням стоїть як нормальне, якщо поставити reverse, то всі описані кадри будуть виконуватися в зворотному напрямку. Давайте перевіримо, в чому різниця. Для цього я трохи змінив ефект, додавши ще один кадр.

@keyframes pulse{
0%{font-size: 50px;}
50%{font-size: 60px;}
70%{font-size: 80px;}
100%{font-size: 50px;}}

Отже, при нормальному напрямку в першій половині анімації розмір шрифту збільшиться до 60 пікселів, потім він різко збільшитися ще раз, вже до 80-ти, після чого повернеться в початкове положення.

Анімація в CSS3

Рис. 2. Початковий розмір тексту

Анімація в CSS3

Рис. 3. Розмір шрифту майже в кінці анімації, перед різким поверненням до вихідного стану.

Тепер задаємо:

animation-direction: reverse;

Все перевернулося навпаки. Спочатку текст збільшитися аж на 30 пікселів, до 80-ти, частину анімації він буде плавно зменшуватися, зрештою повернувши собі колишні розміри. Все просто.

Форма анімації

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

animation-timing-function: ease;

Виконання почнеться повільно, потім прискориться, а в кінці знову зменшить швидкість. Крім цього є і інші ефекти: ease-in, ease-out, ease-in-out. Всі їх описувати не буду, можете самі спробувати застосувати їх до елементів.

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

Щоб всі перераховані вище параметри записати в один рядок і заощадити купу місця в коді, використовуйте скорочений запис:

animation: ім’я|тривалість|форма|затримка|напрямок|кількість повторів

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

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

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