CSS3 анімація та приклад її використання, нескінченний повтор
Основи створення
Отже, перш за все, потрібно почати з того, як її створювати. Ви, напевно, звикли до того, що будь-яка річ у css реалізується прописуванням потрібному селектору потрібних властивостей з відповідними значеннями. Так от при створенні анімації тільки цим не обійтися. Схема виглядає так:
Створюються самі ефекти переходів за допомогою @keyframes
Потрібному елементу задається ця анімація, а також її параметри (все це за допомогою властивостей та їх значень).
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
Отже, для початку нам потрібно описати потрібні зміни в @keyframes, давайте розберемо докладніше, як з ними працювати.
Синтаксис @keyframes
Власне, мені простіше пояснити вам усе на готовому прикладі, хай і дуже простому. Ось він (код додається до css-файл):
Отже, після ключовика @keyframes йде довільне слово, яке виступатиме назвою анімації. У нашому випадку це “pulse”. Далі відкриваються фігурні дужки, у яких записуються необхідні правила.
Відсотки це так звані часові позначки, на яких до елемента будуть додаватися зазначені властивості. У нашому випадку записане означає наступне: на самому початку виконання розмір шрифту становитиме 50 пікселів, у її середині він збільшиться до 60-ти, а наприкінці знову зменшиться до початкового розміру.
Ключові слова from та to можуть замінити відсотковий запис, вони позначають 0% і 100% відповідно, тобто початок і кінець відтворення.
Застосовуємо анімацію у дії
Поки що у нас просто код, який формує анімаційний ефект, але він ніде не застосовується. Якщо ви оновите вашувеб-сторінку на ній нічого не зміниться. Відповідно, щоб застосувати анімацію, потрібно виконати дві дії:
Вибрати елемент, для якого вона буде застосовуватись
Зв'язати його з правилами, описаними через @keyframes (за допомогою імені), а також задати додаткові налаштування, якщо це буде необхідно.
У своєму html-файлі я створив блок із класом shadow, в якому розташовується простий рядок тексту. Наша мета – застосувати анімаційні ефекти, описані нами раніше, до цього текстового елемента.
Є дві обов'язкові властивості, які потрібно вказати у такому разі, щоб усе запрацювало. По-перше, це ім'я, яке ми писали в keyframes. По-друге, це тривалість анімації, тому що без цього параметра браузер просто не зможе її відтворити.
Отже, окрім тих стилів, що вже є у нашого блоку, додаємо нові:
Таким чином, ми пов'язали елемент з описаною раніше анімацією, а також зазначили її тривалість. Обновіть сторінку і ви переконаєтеся, що все вже працює – наш ефект справді виконається, але лише один раз.
Щоб керувати кількістю повторень, існує ще одна властивість:
Таким чином, все повториться 4 рази, після чого припиниться. Як ви розумієте, замість чотирьох можна вписати будь-яку кількість.
Нескінченна анімація в css3
Реалізується дуже легко за допомогою цієї властивості. Насправді ви можете просто зачепити кількість повторень у пару тисяч, цього цілком вистачить, але теоретично наша анімація не повторюватиметься нескінченно.
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
Я рекомендую для реалізації нескінченних повторень писати так:
Все, тепер мизробили нескінченний повтор. Перевіряти чи це так, просидівши все життя за монітором, я не раджу. Просто це застосовується у тих випадках, коли ви хочете, щоб ефект постійно повторювався і не зникав. Якщо він ненав'язливий і не відволікає користувача, чому б і ні.
Затримка перед початком
За промовчанням відтворення починається після повного завантаження сторінки. Цією поведінкою можна керувати за допомогою якості animation-delay. Його значення задається за секунди.
Напрям
Ще одна цікава властивість – animation-direction. За замовчуванням стоїть як нормальне, якщо поставити reverse, всі описані кадри будуть виконуватися у зворотному напрямку. Давайте перевіримо, у чому різниця. Для цього я трохи змінив ефект, додавши ще одного кадру.
Отже, при нормальному напрямку в першій половині анімації розмір шрифту збільшиться до 60 пікселів, потім різко збільшиться ще раз, вже до 80-ти, після чого повернеться у вихідне положення.
Мал. 2. Початковий розмір тексту
Мал. 3. Розмір шрифту майже наприкінці анімації перед різким поверненням до вихідного стану.
Все перекинулося навпаки. Спочатку текст збільшитися аж на 30 пікселів, до 80-ти, частина анімації, що залишилася, він плавно зменшуватиметься, зрештою повернувши собі колишні розміри. Все просто.
Форма анімації
А це, мабуть, одна із найцікавіших налаштувань, в експериментах з якою можна провозитися довгий час. За замовчуванням, всі зміни виконуються з однаковою швидкістю. Такий тип виконання анімації називається лінійним, крім нього є інші:
Виконання почнеться повільно, потім прискориться, а наприкінці знову зменшить швидкість. Крім цього, є й інші ефекти: ease-in, ease-out, ease-in-out. Усі їх описувати не буду, можете саміспробувати застосувати їх до елементів.
Скорочений запис
Щоб усі вищезазначені параметри записати в один рядок і заощадити купу місця в коді, використовуйте скорочений запис:
Я думаю, поки вистачить цього для створення своїх тлумачних анімацій. Набагато більше тут залежить від вашої фантазії. Як бачите, не дуже багато властивостей потрібно знати для реалізації гарних речей на сторінці.
Насправді ми з вами розглянули лише базові можливості. Наприклад, ту ж форму анімації можна задавати за допомогою функції кубічних кривих Безьє, але це складніша тема для розмови, я б навіть сказав, абсолютна не потрібна новачкові, тому що перерахованих вище властивостей вам вистачить для створення простих і досить складних анімаційних ефектів.
Отже, це був приклад анімації на css3, таких прикладів можна наводити ще багато, але головне тут зрозуміти суть, розібратися з синтаксисом @keyframes і тоді жодних проблем і у вас не виникне. Інші властивості css3 ви можете вивчити в цьому курсі. Підписуйтесь на наш блог, щоб отримувати класні матеріали з сайтобудування.
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3