Что такое CSS-анимация и какие у нее возможности

CSS-анимация становится все более популярной. Сейчас ее используют в самых необычных проявлениях, поэтому кажется, что это нечто суперсложное. Если изучить код таких эффектов, часто оказывается, что они достаточно просты в исполнении. В этой статье мы поговорим о том, как работают движущиеся объекты на веб-сайтах и рассмотрим несколько успешных кейсов.

Что такое CSS-анимация

CSS-animation придает сайтам динамичность. Она основана на перемещении HTML-элементов страницы, без задействования JavaScript и Flash. Создаются подобные эффекты при помощи привязки ключевых кадров. Каждая веха вмещает в себя стили для активных элементов. Отличительная характеристика CSS-анимации — возможность использования почти для любого элемента или псевдоэлемента. Она позволяет создавать автоматическое воспроизведение в заданный отрезок времени, не перегружая систему.

Направление начало набирать популярность в 2018 году и до сих пор продолжает наращивать обороты. За это время эффекты стали не только отыгрывать роль декора, но и мягко направлять пользователей к совершению целевых действий. Из этого вытекает основное правило — не использовать тяжеловесную анимацию, которая не только замедлит загрузку страниц, но и будет отвлекать от основной информации. Современная тяга к минимализму охватила и эту сферу, но почти все лучшие работы в этом направлении все еще являются вариациями двенадцати принципов от Disney, сформированных в восьмидесятых.

Преимущества CSS-анимации:

  • проста в использовании и не требует знания дополнительных технологий, вроде JavaScript;
  • стабильная работа при невысоких нагрузках для системы, в отличие от даже самых простых эффектов, выполненных с использованием других инструментов;
  • дает браузеру возможность контролировать процесс воспроизведения, особенно когда речь заходит об оптимизации
  • функционирования системы за счет снижения частоты обновления кадров на неактивных вкладках.

Рассмотрим несколько примеров качественной и уместной анимации, выполненной благодаря стилям CSS.

Как сделаны пузырьки в 7UP

Сайт напитка 7UP оживляют пузырьки. В первый раз они появляются на прелоадере, а после — сопровождают на всех страницах, усиливая ощущение свежести. Отдельные элементы отрисованы в SVG, к каждому из них привязано два эффекта.

Задача первого — добавлять реалистичности при помощи колебаний, а второго — задавать разную степень непрозрачности объекта и определять траекторию движения. Смещение одних пузырьков происходит с задержкой, а других — в строго определенное время, что добавляет дополнительной реалистичности.

Если открыть пример анимации пузырей, становится понятно, что для этой техники было разработано два слоя — один для маленьких, а второй для больших. Размещаются все части строго внизу экрана, чтобы создать эффект открытой бутылки газировки. Каждый элемент имеет свою траекторию, что совсем не усложняет задачу программиста. В начале и конце пути к верхней части дисплея пузырьки становятся прозрачными. После привязки этих изменений специалист задает мелкие колебания.

Снегопад на странице веб-сайта

Идея многим похожа на предыдущую, отличие только в плавности и направлении. Снегопад неплохо представлен у USA TODAY. В довольно классическую задумку можно добавить креатива, и вот перед пользователями уже не разноцветные кружочки, а дождь из цыплят.

Объекты все также создаются в SVG, технически процесс сильно напоминает ситуацию с 7UP, описанную выше. Основным действием будет разделение на слои и замена значений Y ключевых кадров.


Эффект применяется не к отдельным объектам, а к слоям, что немного ускоряет его создание. Стоит отметить, что изменение скорости кружочков может добавить веб-платформе глубины.

Отображение звука в виде пульсирующих кругов

Прелоадер музыкального ресурса peeKabeat дополнен пульсирующими кругами, которые будто бы отображают распространение музыки в пространстве. Это выглядит очень уместно, при том, что сама анимация довольно проста. Эффект универсален — его используют во многих ситуациях, просто перерабатывая под определенный дизайн. Тем не менее, он продолжает выглядеть свежо и выполнять свои задачи.

На сайте было создано три круга, к которым привязана смена прозрачности и масштаба. Стоит отметить, что инструмент позволяет настроить скорость движения каждого круга отдельно, что может существенно повлиять на итоговый результат.

Движение по общей траектории

Одинаковые линии движения нескольких элементов, которые поддерживают друг друга — это всегда хорошее решение. Именно таким способом на платформе Coulee Creative пользователей познакомили с командой. Создатели стильно разбросали буквы важных для позиционирования слов и поставили на фон фото членов команды. Без анимации эта идея выглядела бы сухо, но каждый участник кивает, а перемещение букв продолжает его движение.


Далее на сайте также присутствует движение, что оживляет и без того стильный дизайн. При этом анимация не выглядит навязчивой или излишней.

Покадровая прорисовка

Если посмотреть на данный пример, видно что движущиеся элементы крохотные и ненавязчивые. Тем не менее, они отлично справляются со своей задачей — оживить сайт, добавить ему легкости и некой эксклюзивности. Если убрать с этой веб-платформы анимацию, останется плоская скучная картинка, поэтому покадровая прорисовка действительно имеет смысл. Такой вид анимации несколько сложнее, ведь требует навыков работы с векторной графикой. Каждое движение птиц отрисовано в редакторе, только после этого объединено и сохранено как SVG.