Проста css анімація за допомогою @keyframes
@keyframes
CSS keyframes дозволяє виробляти зміни постійно і автоматично, а не тільки у відповідь на події миші, як в transition. За допомогою кейфреймов можна змінювати CSS стилі для заданого селектора в будь-якій точці в момент зміни стану або події, визначеного через JQuery (наприклад, скролинг). Дане правило використовується в парі з властивістю animation, за допомогою якого можна задати duration, timing function, delay і direction. Властивості типу transform, якщо вони входять в анімацію, оголошуються всередині правила @keyframes.
Для початку кожне правило @keyframe повинно мати унікальне ім'я:
Це ім'я використовується в стилях елемента в властивості animation:
У кейфрейме задаються правила, виражені в процентах. Відсотки є точки вздовж тимчасової лінії анімації, всередині яких задаються стилі для рендеринга на елементі:
У цьому прикладі елемент div з класом element змінює колір з рожевого на жовтий і в кінці на синій. Якщо точок всього дві, можна використовувати from і to:
Приклад застосування цього простого правила до фонового кольору для зміни body:
властивість animation
Сам по собі @keyframes без інструкцій, які визначають тривалість, тимчасову функцію і напрямок, нічого не робить. Всі ці інструкції працюють точно так же, як і у властивості transition. Всі ці подсвойства можна задати в одну властивість animation за допомогою наступного синтаксису:
Або їх можна задати окремо, додавши слово animation перед кожним подсвойством:
… Ну ви зрозуміли.
Не всі подсвойства обов'язкові, але вони повинні бути записані в правильному порядку, щоб браузер міг правильно застосувати timing value і відрізнити ім'я анімації від інших ключових слів. Короткий опис подсвойств, які нам знадобляться:
duration - задає тривалість анімації від початку і до кінця;
timing-function - задає спосіб пересування анімації уздовж тимчасового «треку», наприклад, ease, ease-in, linear і т.д;
delay - час затримки (якщо воно є) старту анімації;
iteration-count - скільки разів грати анімацію, для зациклення можна використовувати значення infinite.
Крім вже знайомих нам значень (завдяки властивості transition) анімація також приймає direction, iteration-count, play-state і fill-mode.
Кількість ітерацій
За замовчуванням анімація проходить один цикл і завершується. У властивості animation-iteration-count можна вказати значення у вигляді числа, тобто скільки разів повинна запуститися анімація. Також для зациклення можна використовувати ключове слово infinite.
НАПРЯМОК
Подсвойство animation-direction задається не візуальне напрям анімації (положення, початковий і кінцевий стан задаються в стилях), а вказує порядок запуску кейфреймов. Подсвойство приймає значення normal, reverse, alternate і alternate-reverse.
Значення normal програє анімацію від початку і до кінця. Значення reverse програє анімацію навпаки, від низу до верху, від 100% до 0%.
Значення alternate програє анімацію спочатку вперед, потім назад. Значення alternate-reverse спочатку назад, потім вперед.
РЕЖИМ ЗАЛИВКИ
Подсвойство animation-fill-mode задає, чи будуть видні стилі до або після програвання анімації.
За замовчуванням (normal) стилі в кейфреймах не впливають на елемент до або після анімації. Режим заливки зручно ставити, якщо потрібно заморозити кінцевий стан анімації елемента до тих пір, поки що-небудь не відбудеться, або для того, щоб пофиксить різке повернення до первинного стану (як в нашому демо з фоновим кольором вище). Опис кожного значення:
backwards - застосовуються стилі першого кейфрейма (0%) до програвання анімації і установки затримки;
forwards - стилі останнього кейфрейма (100%) залишаються активні після програвання анімації;
both - правила працюють як для backwards так і для forwards.
Нижче я покажу, як за допомогою режиму заливки уникнути різкого миготіння.
СТАН програвання
Стан програвання можна задати в paused і running. Одне з корисних застосувань play-state - це ставити анімацію на паузу при наведенні миші. Якщо повернутися до першого демо і навести курсор на рухому рядок, вона зупиниться.
Можна було б використовувати animation: paused; або animation-play-state: paused ;, але для перезапису попереднього значення при зміні стану краще використовувати спеціальне подсвойство.
Створення ефекту фотозатвора при наведенні на зображення за допомогою анімації і @keyframes
Приклад демонструє ефект «затвора» при наведенні курсору на зображення в галереї. На відміну від простого ефекту hover за допомогою transition ця CSS анімація використовує кейфрейми для поступової зміни прозорості псевдоелемента, зміни його розміру і видалення CSS3 фільтра з відтінками сірого, який доданий до всіх зображень.
Важливий CSS код для контейнера зображення і псевдоелемента, який лягає поверх нього:
Зверніть увагу, що на елементи встановлені filter і opacity. Ці властивості задають свої значення за замовчуванням ще до спрацьовування анімації.
Тепер цеплямем властивість animation до події, яка повинна запускати анімацію. Найпростіший спосіб - використовувати: hover. Також можна задати спеціальний клас за подією, визначеному за допомогою JQuery.
До першої анімації прив'язаний кейфрем bloom з тимчасової функцією ease-in-out і тривалістю 0.75 секунди, після чого за допомогою animation-fill-modeі значення forwards повертаємося до оригінальних стилів. Так наш ефект не перестрибне до ефекту відтінків сірого. До другої анімації прив'язаний кейфрейм circle з тривалістю 0.75 секунди.
В анімації bloom ми поступово прибираємо фільтр з відтінками сірого, встановлений на елемент figure (з 0.8 до 0). Після завершення анімації за допомогою режиму заливки зберігається значення 0. Якщо не вказати це властивість, зображення перестрибне на первинне стан.
У другій анімації circle ми змінюємо прозорість з половини до одиниці, міняємо колір з жовтого на рожевий, потім розширюємо елемент і знижуємо прозорість до 0.
Це основи для створення простого ефекту «пульсу» або затвора. Зверніть увагу, що тут прозорість відокремлена від RGBA і використовується властивість opacity!
готові інструменти
Як тільки ви освоїте основи CSS анімації, ви зрозумієте, що можливості безмежні. До сих пір є безліч чудових бібліотека і інструментів, за допомогою яких можна швидко створювати CSS анімації. Найкращі інструменти:
ANIMATE.CSS
У попередній статті я показав вам, як за допомогою Flexbox створити макет, розділений на дві частини, а також як за допомогою бібліотеки animate.css анімувати відкриття сторінок з контентом і зображення. У Animate.css є кілька вбудованих анімацій, які можна подивитися і вставити в свій проект за допомогою одного класу. Крім того, бібліотека вчить застосовувати і видаляти класи до елементів за допомогою JQuery. Прочитайте цю статтю, щоб навчитися прив'язувати анімацію до подій типу клік або скрол.
CUBIC BEZIER TOOL
cubic-bezier.com дає дивовижний візуальний інтерфейс для створення власних тимчасових кубічних функцій Безьє. Результат видно в реальному часі. Код можна безпосередньо скопіювати в свої стилі.
CSS ANIMATE
Сервіс CSS Animate web tool дозволяє генерувати повноцінні блоки кейфрейм анімацій. З його допомогою можна швидко перейти до створення складних тимчасових ліній. Якщо ви знайомі з Flash, тут все схоже. Просто клікніть на тимчасову шкалу, перетягніть елемент на позицію, задайте властивості анімації і повторіть дії для нових точок. Програйте код для перевірки, після чого його можна скопіювати.
Редакція: Команда webformyself.
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
