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

Анимация на сайте только через CSS: какие у этого преимущества и подводные камни

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

  1. Простые анимации очень легко создавать, так как для этого не требуется что-то где-то дополнительно настраивать, а также не требуется владеть JavaScript.
  2. Анимация будет корректно воспроизводиться даже при серьезных нагрузках на систему пользователя. Дело в том, что если анимация написана на JavaScript, но при этом код получился громоздким или просто неоптимизированным, то высок риск столкнуться с подвисаниями при проигрывании. Подобная проблема есть и при использовании сторонних инструментов и библиотек, правда, подвисания там возникают по другой причине - объмная библиотека может создавать дополнительную нагрузку на систему пользователя и сайт.
  3. Анимация через стандартный CSS позволяет браузеру лучше контролировать последовательность ее воспроизведения. Это дает лучшую оптимизацию работы браузера, следовательно, уменьшает нагрузку на систему пользователя и позволяет корректно воспроизводить анимацию. Сайт работает “плавно” даже на слабых системах.

Правда, у такого подхода имеются и свои недостатки, связанные, в основном, с рабочей средой:

  • Код анимации на чистом CSS получается длиннее, чем на JS и тем более, чем при использовании классов из заранее подготовленных библиотек и инструментов. Из этого следует, что на создание одной и той же анимации может уйти больше времени, чем если использовать не только чистый CSS.
  • Продвинутые анимации требуют большей концентрации. На JS их можно заложить в одну-две функции, а при использовании сторонних инструментов можно обойтись простым присвоением нужного класса.
  • Потребуется заниматься копипастой. Достаточно спорный минус, но некоторые разработчики считают необходимость прибегать к копипасте лишь тратой времени и предпочли бы заняться вместо этого чем-то более полезным.

Структура анимаций в CSS

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

Говоря о подсвойствах animation, можно выделить следующие:

  • animation-name отвечает за идентификацию @keyframes, то есть кадров анимации;
  • animation-duration отвечает за указание временного промежутка, в течение которого должен быть выполнен цикл анимации;
  • animation-timing-function настройка ускорения анимации или ее части;
  • animation-delay позволяет задать задержку по времени между загрузкой элемента и началом воспроизведения;
  • animation-iteration-count задает количество и условия повторения анимации;
  • animation-direction позволяет настраивать альтернативы при каждом проигрывании анимации;
  • animation-fill-mode настраивает значения, используемые анимацией, до и после исполнения;
  • animation-play-state приостанавливает или возобновляет анимацию при определенных условиях.

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

Ключевые кадры тоже ограничиваются по времени, по аналогии с основной анимацией. Для этого используется свойство percentage. Оно отвечает за определение стадии начала и конца ключевого кадра. Значения для него указываются в процентах: 0% это начало проигрывания, а 100% его конец. Для их соединения между собой используется специальная конструкция from-to. Ключевые кадры сложной анимации могут накладываться друг на друга, поэтому конструкция from-to просто необходима для их корректного воспроизведения.

Реализация CSS-анимации

Рассмотрим ее на паре примеров. Это необходимо для лучшего понимания работы рассмотренных выше свойств, а также того, какие значения им можно задать, а какие не нужно. Так как добавление анимации может сделать страницу шире открытого окна браузера, то рекомендуется к контейнеру с анимированными элементами добавить свойство overflow: hidden. Оно скрывает горизонтальную прокрутку.

Пример 1: Скользящий текст

Достаточно простая анимация, которая при этом смотрится эффектно, создавая впечатления не просто всплывающего текстового блока, а как будто появление отдельных слов. В HTML-документе создайте блок с текстом, обернув его в тег <p> или <span>. В качестве примера будет использован тег <p> с классом “text-animation”. Такая анимация неплохо смотрится на большом по объему тексте: хотя бы на пару предложений.

Вот так будет выглядеть CSS-код с добавленной анимацией:

В этом коде всего два основных кадра, которые определены в блоке @keyframes. Обратите внимание, что к этому блоку также приписано и название анимации, которое указывалось в свойствах выше. Описание позиций текста для первого кадра начинается в блоке from. Здесь отступ слева (margin-left) составляет 100% от размеров родительского элемента, следовательно, текст изначально находится за пределами поля зрения, а так как прокрутка по горизонтали скрыта, то пользователи его увидеть не могут, пока не проигрывается анимация. Ширина (width) выставлена в 3 раза больше ширины родительского элемента. Это необходимо, чтобы:

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

Второй кадр (to) является в этой анимации завершающим. По-сути, это конечный вид блока, после проигрывания. Левый отступ здесь удаляется (или становится меньше, если вам его все же нужно оставить), а длина текста приобретает свое нормально значение - 100% от родительского элемента. Вся анимация идет 3 секунды.

Эта анимация не повторяется. То есть, когда она проигрывается вы сможете увидеть ее снова только если обновите страницу. Если вам требуется, чтобы она проигрывалась постоянно или при определенных условиях, то добавьте в свойства класса text-animation animation-iteration-count. Оно отвечает за цикличное повторение анимации. Может принимать следующие свойства:

  • infinite - повторяется бесконечно вне зависимости от условий;
  • пользовательское целочисленное значение (1, 3, 10 и так далее) показывает количество циклов повторения анимации;
  • пользовательские дробные значения (0.5, 1.5 и так далее) показывают неполный цикл анимации.

Свойство animation-iteration-count не может принимать отрицательных значений.

Полные CSS стили текста и его анимация

Пример 2: Анимация z-index

Некоторые свойства, по мнению обычного пользователя, анимировать нельзя либо делать это просто незачем. Например, как и зачем анимировать z-index, который отвечает за позиционирование элементов в Z-плоскости координат? На самом деле его анимация может быть ключевой в создании сложных композиций: прелоадеров, динамического фона, даже иногда параллакс-эффектов. Ведь как еще сделать плавный перенос одних объектов поверх других?

Рассмотрим простой пример анимирования z-index:

Этот отрезок кода является компонентом более сложной анимации прелоадера, где компоненты меняются местами в Z-плоскости, создавая эффект движущейся замкнутой спирали. Первую половину анимации рассматриваемый элемент находится на переднем плане композиции, но во второй части переходит уже на задний план. Без работы с z-index добиться подобного эффекта было бы просто невозможно - компоненты бы просто накладывались друг на друга.

При анимации круги перекрывают друг друга, создавая эффект замкнутой вращающейся спирали

Еще один пример анимации с использованием z-index:

Этот код является частью анимации зачеркивания фразы красной линией. Эту линию можно было бы вполне разместить поверх букв, а z-index задать один раз в виде константы и не трогать его. Однако обратите внимание, что слово зачеркивается частично - некоторые буквы находятся поверх линии. Анимация z-index здесь используется как раз для букв: те, которые должны оказаться зачеркнутыми получаются отрицательное значение, а которые нет положительное.

Анимация зачеркивания слова, когда некоторые буквы выпадают из-под черты

Вообще анимирование элементов с изменением значения z-index позволяет сделать дизайн сайт многослойным и интересным. Также оно открывает множество интересных возможностей для самой необычной анимации. Но самое главное - нагрузка на систему пользователя минимальна, поэтому можно не опасаться, что ваша анимация заглючит в самый неподходящий момент.

Пример 3: Многослойная анимация

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

Вот пример заготовки для многослойной анимации в HTML:

<div class='layer -bottom'>content</div>
<div class='layer -middle'>content</div>
<div class='layer -top'>content</div>

А вот описание их поведения перед анимацией в CSS свойствах:

Для всех слоев с классом layer задается абсолютная позиция, а потом для каждого отдельно выделяются свои свойства: для слоя лежащего поверх, снизу. Это минимальная заготовка, поэтому при проигрывании никакой анимации воспроизведено не будет. Однако, если заполнить HTML-блоки контентом и сделать для них анимацию, то может получится интересная заставка для главного экрана наподобие той, что показана на изображении ниже.

Пример многослойной анимации, когда при движении курсора один слой плавно сменяется другим

Пример 4: Комбинации анимации из animation-timing-function

Частой ошибкой начинающего верстальщика является понимание, что animation-timing-function может быть только в одном экземпляре на всю анимацию, но это не совсем верно. Она может быть в единственном экземпляре на какой-то один кадр, но в конкретном @keyframes ее можно менять неограниченное количество раз. Вот пример:

Подобные решения могут быть необходимы, когда требуется соблюсти некоторую физику, например, при анимировании подпрыгиваний, скольжений и так далее.

Заключение

Современные браузеры поддерживают почти все основные нововведения в CSS3, поэтому опасаться, что ваша анимация не будет проигрываться у какого-то пользователя, не нужно. Много чего, что на первый взгляд “нельзя сверстать”, вполне реально не только сверстать и анимировать. Главное, научится находить необычные решения и не бояться экспериментировать. Конечно же, перед созданием сложной анимации, неплохо бы сделать хотя бы приблизительный концепт того, что хотите получить в итоге, а потом уже приступать к реализации задуманного на CSS и HTML.