Вы, наверное, заметили, что в последнее время все больше и больше на сайтах появляется CSS-анимации. Анимация была основной тенденцией в интернете в 2018 году и эта же тенденция продолжает увеличивать свою популярность в году нынешнем. Веб-дизайнеры становятся все более креативней, их проекты насыщены творческими моментами, а потому анимация в данном случае становится той возможностью, что привносит на сайт личность, позволяет отобразить сложные идеи без особых усилий и тонко направить действия пользователей.
Золотое правило заключено в том, что каждая конкретная CSS-анимация не должна быть большой и объемной по размеру. Даже едва уловимое движение, легкое и маленькое по своей сути, может иметь большое влияние на сознание посетителей. В то же время слишком объемная и «тяжелая» анимация способна отвлекать пользователей от контента и раздражать их только своим наличием. Забавно, но лучшие анимации, которые мы видим в интернете, по-прежнему имеют свои корни в 12-ти классических принципах анимации Disney, что были изложены еще в книге начала 80-х годов прошлого века The Illusion of Life: Disney Animation.
Но мы решили в этом материале создать небольшую подборку лучших примеров CSS-анимации с веб-сайтов по всему миру и немного углубиться в код, чтобы посмотреть, как эта красота создается и насколько это несложно.
Что такое CSS-анимация?
CSS-animation – это метод анимации некоторых HTML-элементов без использования процессоров JavaScript или Flash. Нет ограничений на количество или частоту свойств CSS, которые могут быть изменены. Анимирование же создается путем указания ключевых кадров, каждый из которых содержит стили для элементов, используемых в данной анимации.
Пузыри
Достаточно открыть известный многим сайт бренда напитков 7UP, и сразу же пузырьки предстают перед нашим взором. Анимация состоит из нескольких элементов: пузырьки отрисованы в SVG и к каждому пузырьку применяется две анимации.
Первая – изменяет непрозрачность пузырька и перемещает его по вертикали; вторая – создает эффект колебания для дополнительного реализма (Когда вы открываете бутылку с газировкой, то пузырьки не движутся все строго по прямой снизу вверх. Они немного «плавают»). Смещения обрабатываются путем захвата каждого пузырька и применением к нему другой, по продолжительности и с задержкой по времени, анимации.
Пример анимации представлен на codepen, где видно, что создается два слоя пузырей: один для больших по размеру и один для маленьких. Все они размещаются в нижней части окна просмотра (кадра).
Затем к каждому элементу применяется своя анимация. CSS имеет мощный движок и очень простой код для создания сложных анимаций. Сначала пузырьки просто перемещаются вверх по экрану и меняют свою непрозрачность (исчезая в начале и в конце), а затем уже описывается их колебание.
При этом вариации колебания проверяются «на глазок». Слишком сильное – будет нереалистичным, а медленное – станет незаметным. Поэтому даже в случае работы с кодом приходится экспериментировать.
Кроме того, определив основные моменты анимации, нужно применить их к пузырькам. Поэтому здесь придут на помощь группы (маленькие отдельно, большие отдельно). Также стоит уделить внимание и продолжительности анимации и задержкам на несколько секунд, а затем включение повтора с помощью функции animation.
Полет птичек
Легкая, воздушная, крошечная анимация небольших птичек, летящих по небу, добавляет некоторое изящество сайту. Проект fournier-pere-fils и без анимации выглядел бы совсем недурно, но она придает ему «изюминку». Такую анимацию создать сложнее и без должных графических навыков практически невозможно. Суть в том, что в векторе необходимо отрисовать каждый кадр полета птицы. Затем все кадры объединяются и сохраняются как SVG.
Но уже затем работа с HTML и CSS очень проста. Нам нужно заключить «птицу» в контейнер, чтобы иметь возможность применить несколько анимаций – одна для полета, другая для перемещения по экрану. И снова обратимся к примерам полета одной птички и нескольких.
Готовый файл SVG используется в качестве фона для элемента div и выбирается размер каждого кадра. Если SVG состоит из 10 ячеек (кадров), то и ширину блока умножаем на 10, а затем чуть-чуть меняем значение, чтобы выглядело более реалистично.
Анимация CSS имеет несколько трюков, о которых вы можете не знать. Мы можем использовать функцию animation-timing-function для отображения изображения в действии, аналогично тому, как осуществляется анимация листания страниц в книге или тетради. Но в результате такого кода птичка будет просто хлопать крыльями, но никак не лететь – перемещаться по экрану. Для этого создается покадровая анимация, которая дополнительно изменяет и координаты по вертикали, и масштаб птицы для большего реализма.
После создания анимации необходимо просто применить их. При этом можно создать несколько копий нашей птицы и создавать различные временные анимации и задержки, создавая вариант полета стаи птиц или двух-трех.
Снегопад
Вариантов идеи много, но наглядным примером становится проект usatoday, где на заднем плане разные по размеру кружочки двигаются равномерно сверху вниз. Разумеется, вместо кружочков могут быть и иные изображения, элементы, объекты. Исходный пример.
Снег создается с помощью SVG и технически работа с кодом очень похожа на то, как создавались пузырьки ранее. Для начала создаются два слоя кругов внутри SVG, а затем они анимируются, путем изменения значения Y для ключевого кадра.
При этом анимация применяется к каждому слою, а не к отдельным элементам (как было с пузырьками). Затем повторно используется одна и та же анимация для обоих слоев. Если же добавить разную скорость движения для слоев, то можно создать таким образом глубину и объемность в сцене.
Движущийся фон
На проекте .sbs существует еще одна оригинальная анимация – движущийся фон. То есть, заголовок состоит из двух частей. Верхняя – однотонная, брусковая и жирная. Нижняя же часть обладает анимацией, движением, а точнее, некоторым изображением, что было «разрезано» на полосочки. Такая тонкая анимация, несомненно, привлекает внимание пользователей. И снова для этого используется настройка SVG, движение по маске для ключевых кадров.
Пульсирующие круги
Такая анимация ярко представлена на сайте peekabeat. Это простая, но эффективная и несложно создаваемая анимация, способная в разы преобразить и дизайн сайта, и внимание привлечь к проекту, и просто добавить яркости и характер.
Работа с CSS-кодом заключается в создании трех (в данном случае) кругов, а затем анимирования их для изменения масштаба и непрозрачности до 50%. Кроме того, определение значения функции animation позволяет сделать пульсацию медленной или быстрой для каждого отдельного круга.
Таким образом, вариантов модификаций становится много.
Пятнопоглощение
Необычное название, но если пройтись по сайту heartbeat, то можно увидеть, что эффект перехода от страницы к странице выглядит так, словно страницу поглощает черное пятно неправильной формы. Аналогичный пример есть и на codepen.
Суть такой анимации даже не в том, что отрисовывается некоторая форма. Переход осуществляется с помощью ::before для псевдо-элемента. Начнем с того, что псевдо-элемент помещается в нижней части, охватывая всю ширину ссылки (кнопки), но по высоте он всего 1-2 пикселя.
Когда происходит взаимодействие с ссылкой (кнопкой), данный псевдо-элемент увеличивается в размерах на 105% (например). При этом эффект увеличения по вертикали выглядит более заметным и ярким. Одновременно с этим осуществляется и изменение цвета ссылки/кнопки.
В примере codepen вместо пятна образовался прямоугольник, сначала представший перед нами в виде обычного подчеркивания.
Крутим, вертим
Если посетить сайт couleecreative, можно увидеть в центре иконку-гамбургер для меню. Если навести курсор на нее, то большой внешний круг начнет двигаться против часовой стрелки. Если курсор убрать – по часовой. Не ново, но необычно и оригинально.
Аналогичный пример есть и на codepen, с той разницей, что круг более четкий, явный и движения идут в обратную сторону (при наведении – по часовой стрелке).
Такая анимированная кнопка меню создается опять с помощью SVG. И в данном случае используется два варианта анимации: круговая анимация на 360 градусов и смена цвета для значка в центре. Но наиболее сложной частью является временная функция. В частности, это cubic-bezier для возможности большего контроля. Таким образом, задавая значение общей продолжительности, можно разделить всю анимацию на составные части: начать с медленной анимации, затем в середине ускориться и снова замедлиться в конце.
Завершение
Интересных и оригинальных анимаций в действительности еще много. Есть интересные варианты на .thepaaonline (у прямоугольников внизу появляется цветной уголок), godofwar (кнопка имеет анимационную заливку красным), greenwichlibrary (оранжевая кнопка со стрелкой меняет свой вид). Казалось бы, что такие анимации естественны, они давно используются в разных вариантах и видоизменениях, но суть-то как раз в том, что частота использования CSS-анимации очень выросла за последние полгода.
Разумеется, это объясняется тем, что сами браузеры и компьютеры пользователей стали мощнее, меняются так же и технологии обработки соответствующих функций. Но даже если какая-то анимация уже была где-то использована, это совершенно не значит, что более её нельзя применить.
На примере анимации меню-гамбургера отлично видно, как разработчики изменили исходный вариант (направление движения, скорость и вид самого колеса, не говоря уже о цвете самой иконки). Соответственно, при должной фантазии, изменить можно даже пузырьки 7UP, увеличив их количество, форму, создав фонтан или гейзер, всплеск искр или бенгальского огня.
Иными словами, суть нашего материала была в том, чтобы показать вам, читатели, от чего отталкиваются крупные компании (например, playstation) и отдельные разработчики, как меняют то, что уже есть и, тем самым, создают нечто новое, не на 100% уникальное, но красивое и подходящее под дизайн данного конкретного проекта.