Учебник по анимации CSS: полное руководство для начинающих

Это полное руководство по синтаксису и интерактивное руководство по анимации CSS для начинающих. Используйте его в качестве справочного материала для изучения различных частей спецификации анимации CSS.

Производительность браузера прошла долгий путь за последние 10 лет. Раньше было намного сложнее добавлять интерактивную анимацию на веб-страницы из-за возможных проблем с рендерингом и производительностью. Но в настоящее время анимацию CSS можно использовать гораздо свободнее, а синтаксис, как правило, намного легче изучить по сравнению с функциями CSS, такими как сетка или флексбокс.

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

Синтаксис @keyframes

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

Синтаксис выглядит следующим образом:

 @keyframes moveObject 0% transform: translateX(0); 50% transform: translateX(300px); 100% transform: translateX(300px) scale(1.5);

Как показано здесь, правило @keyframes состоит из трех основных частей:

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

В этом первом примере нашего учебника по CSS-анимации я определил свою анимацию с именем moveObject . Это может быть любое имя, которое я захочу, оно чувствительно к регистру и должно соответствовать правилам пользовательского идентификатора в CSS. Это пользовательское имя должно совпадать с именем, используемым в свойстве animation-name (обсуждается позже).

В моем примере вы заметите, что я использовал проценты для определения каждого из ключевых кадров в моей анимации. Если моя анимация включает ключевые кадры, равные 0% и 100% , я могу альтернативно использовать ключевые слова from и to :

 @keyframes moveObject from transform: translateX(0); 50% transform: translateX(300px); to transform: translateX(300px) scale(1.5);

Следующий интерактивный CodePen использует приведенный выше синтаксис в живом примере:

В демо я включил кнопку, которая сбрасывает анимацию. Позже объясню, зачем это нужно. Но пока просто знайте, что эта анимация включает три ключевых кадра, которые представляют шаги в этой последовательности анимации: начало, шаг 50% и конец (т. е. 0%, 50% и 100%). Каждый из них использует так называемый селектор ключевых кадров вместе с фигурными скобками для определения свойств на этом этапе.

Несколько замечаний о синтаксисе @keyframes :

• Вы можете расположить наборы правил ключевых кадров в любом порядке, который вы хотите, и браузер по-прежнему будет запускать их в порядке, определяемом их процентным соотношением.
• Вы можете опустить ключевые кадры 0% и 100%, и браузер автоматически определит их по существующим стилям анимируемого элемента.
• Если есть повторяющиеся ключевые кадры с разными наборами правил (например, два ключевых кадра для 20% с другим значением преобразования), браузер использует последний.
• Вы можете определить несколько ключевых кадров в одном селекторе ключевых кадров с запятой: 10%, 30% ...
• Ключевое слово !important аннулирует любое значение свойства, поэтому его не следует использовать для свойства внутри набора правил ключевых кадров.

Теперь, когда вы хорошо понимаете синтаксис @keyframes в этом руководстве по CSS-анимации, давайте взглянем на различные свойства анимации, которые определены для анимируемого элемента.

Свойства анимации, которые мы рассмотрим:

Свойство имени анимации

Как уже упоминалось, каждая созданная вами анимация CSS должна иметь имя, которое появляется в синтаксисе @keyframes . Это имя должно совпадать с именем, определенным с помощью свойства animation-name .

Используя CSS из предыдущей демонстрации, синтаксис выглядит следующим образом:

 .box animation-name: moveObject;

Опять же, пользовательское имя, которое я определил, также должно существовать как имя для правила @keyframes — иначе это имя ничего не сделает. Вы можете думать об этом как о вызове функции в JavaScript. Сама функция будет частью кода @keyframes moveObject , а вызов функции будет иметь animation-name: moveObject .

Некоторые вещи, которые следует иметь в виду в отношении animation-name :

• Начальное значение для animation-name — none , что означает отсутствие активных ключевых кадров. Это можно использовать как своего рода «переключатель» для деактивации анимации.
• Выбранное имя чувствительно к регистру и может включать буквы, цифры, символы подчеркивания и дефисы.
• Первым символом в имени должна быть буква или дефис, но только один дефис.
• Имя не может быть зарезервированным словом, таким как unset , initial или inherit .

Свойство продолжительности анимации

Неудивительно, что свойство animation-duration определяет количество времени, в течение которого анимация выполняется один раз от начала до конца. Это значение может быть указано в секундах или миллисекундах, как показано ниже:

 .box animation-duration: 2s;

Вышеприведенное будет эквивалентно следующему:

 .box animation-duration: 2000ms;

Вы можете увидеть свойство animation-duration в действии в следующей демонстрации CodePen. В этой демонстрации вы можете выбрать, как долго будет длиться анимация. Попробуйте ввести различные значения в секундах или миллисекундах, а затем используйте кнопку «Анимировать поле», чтобы запустить анимацию.

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

Несколько замечаний по использованию animation-duration :

• Отрицательные значения недействительны.
• Единица измерения должна быть включена, даже если продолжительность установлена ​​на 0s с (начальное значение).
• Вы можете использовать дробные значения (например, 0.8s )

Свойство функции синхронизации анимации

animation-timing-function , значение которой не так очевидно, как два предыдущих свойства, используется для определения способа, которым выполняется анимация CSS. Это может быть не самое ясное объяснение, но синтаксис может помочь прояснить ситуацию.

Декларация выглядит так:

 .box animation-timing-function: linear;

Это свойство принимает следующие значения ключевых слов:

• ease (начальное значение)
• ease-in
• ease-out
• ease-in-out
• linear
• step-start
• step-end

Большинство значений относительно легко понять по их именам, но вы можете увидеть, чем они отличаются, используя следующую интерактивную демонстрацию:

Используйте ввод select, чтобы выбрать одно из семи значений ключевого слова. Обратите внимание, что значения ease-* «упрощают» анимацию различными способами. Линейное значение постоянно.

Свойство animation-timing-function также принимает следующие функции:

• cubic-bezier() — принимает в качестве аргументов четыре числовых значения, разделенных запятыми
• steps() — принимает в качестве аргументов два значения, число и «термин перехода», разделенные запятой.

Значения ключевого слова step-start и step-end эквивалентны значениям steps(1, jump-start) и steps(1, jump-end) соответственно.

Что касается cubic-bezier() , следующая интерактивная демонстрация может помочь вам немного лучше понять функцию:

Обратите внимание, что демонстрация позволяет вам установить четыре аргумента в функции cubic-bezier() . Два аргумента могут быть отрицательными, а два ограничены десятичными значениями от 0 до 1. Достойное объяснение того, как работают эти типы функций синхронизации, можно найти в этой статье или в этом интерактивном инструменте.

С другой стороны, функция steps() принимает два аргумента:

• Целое число, представляющее равные «остановки» в течение одного цикла анимации.
• Необязательное ключевое слово, называемое «jumpterm», которое определяет, «держится» ли анимация через определенные промежутки времени.

Опять же, интерактивная демонстрация должна помочь вам понять, как работают эти условия перехода:

Попробуйте выбрать целое число вместе с параметром перехода (или попробуйте без параметра перехода), чтобы увидеть, как разные ключевые слова отличаются с разными значениями целых чисел. По-видимому, разрешены отрицательные целые числа, но я не вижу никакой разницы между 0 и любым отрицательным значением.

Свойство числа итераций анимации

В некоторых случаях вы будете довольны, если анимация запустится один раз, но иногда вы хотите, чтобы анимация запускалась несколько раз. Свойство animation-iteration-count позволяет вам сделать это, приняв положительное число, представляющее количество раз, которое вы хотите запустить анимацию:

 .box animation-iteration-count: 3;

Начальное значение для animation-iteration-count равно 1 , но вы также можете использовать ключевое слово infinite (не требующее пояснений) или использовать дробное значение. Дробное значение запустит анимацию частично на дробном прогоне:

 .box animation-iteration-count: 3.5;

Приведенный выше код выполняет анимацию три с половиной раза. То есть за тремя полными итерациями следует одна последняя итерация, которая останавливается ровно на полпути.

Это свойство наиболее полезно при использовании в сочетании со свойством animation-direction (обсуждается далее), потому что анимация, которая запускается только с самого начала, не очень полезна, если она выполняется более одного раза.

Вы можете попробовать демонстрацию ниже, которая позволяет вам выбрать дробное значение для количества итераций, чтобы вы могли увидеть эффект:

Свойство анимация-направление

Как упоминалось выше в этом руководстве по CSS-анимациям, свойство animation-direction прекрасно работает в сочетании с animation-iteration-count . Свойство animation-direction позволяет указать, в каком направлении должна воспроизводиться анимация. Синтаксис выглядит следующим образом:

 .box animation-direction: alternate;

Вы можете установить значение как одно из четырех ключевых слов:

• normal — анимация воспроизводится вперед при первой итерации (по умолчанию).
• reverse — анимация воспроизводится в обратном направлении на первой итерации.
• alternate — анимация воспроизводится вперед на первой итерации, а затем чередуется на последующих итерациях.
• alternate-reverse — то же, что и alternate , но воспроизводится в обратном направлении на первой итерации.

Вы можете попробовать разные значения с разным количеством итераций, используя интерактивную демонстрацию ниже:

Свойство animation-play-state

Свойство animation-play-state не очень полезно в статической среде CSS, но может пригодиться при написании интерактивных анимаций с помощью JavaScript или даже CSS.

Это свойство принимает два значения: running или paused :

 .box animation-direction: paused;

По умолчанию любая заданная анимация находится в состоянии «выполняется». Но вы можете использовать JavaScript для переключения значения свойства. Вы даже можете использовать интерактивную функцию CSS, такую ​​как :hover или :focus , чтобы перевести анимацию в «приостановленное» состояние, что по существу останавливает анимацию, где бы она ни находилась в текущей итерации.

Интерактивная демонстрация ниже имеет бесконечную анимацию с двумя кнопками для «паузы» и «возобновления» анимации.

Свойство задержки анимации

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

 .box animation-delay: 4s;

Как и другие значения, основанные на времени, вы можете установить для animation-delay значение с использованием секунд или миллисекунд. Вы также можете использовать дробные значения.

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

Демонстрация дает вам возможность изменить значение итерации, а также задержку, поэтому вы можете видеть, что задержка не влияет ни на какие последующие итерации — только на первую.

Интересным способом использования этого свойства является отрицательное значение. Например, используя приведенную выше демонстрацию, попробуйте установить для animation-delay значение -0.5s с. Вы заметите, что отрицательная задержка работает почти так же, как движение вперед в машине времени — анимация начинается в середине, а не в начале.

Свойство режима заполнения анимации

Последнее подробное свойство, которое я рассмотрю в этом руководстве по CSS-анимациям, — это свойство, которое я использовал в предыдущей демонстрации. Вы заметите, что когда анимация останавливает последнюю итерацию, поле остается на месте. Это достигается с помощью animation-fill-mode .

 .box animation-fill-mode: forwards;

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

Это свойство принимает следующие четыре значения ключевых слов:

• none — по умолчанию стили не применяются ни до, ни после выполнения.
• forwards — сохраняет все стили, примененные в последнем ключевом кадре анимации.
• backwards — более или менее обратное предыдущему значению, оно сохраняет стили, примененные к анимации, как только она начинает выполняться, но до начала анимации.
• Both – сохраняет стили both для forwards , так и для backwards

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

Для удобства я объединил все демонстрации в одну коллекцию CodePen.

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

Сокращенное свойство анимации

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

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

 .box animation: moveObject 2s ease-in-out 3 reverse running 1.3s forwards;

Честно говоря, это много информации в одной строке. Я бы рекомендовал использовать сокращение, если объявление включает не все свойства, а, может быть, только три или четыре из них.

Если вы используете сокращение, вы можете расположить значения в любом порядке, но обратите внимание на следующие правила:

• Первое значение, определяющее время, — это animation-duration ; любое последующее значение времени является animation-delay .
• Если есть конфликт между ключевым словом и animation-name , значение ключевого слова будет иметь приоритет, если оно появляется первым.
• Любые пропущенные значения вернутся в исходное состояние, как и любое сокращенное свойство CSS.

Применение нескольких анимаций к одному элементу

Еще одна функция, о которой полезно знать, заключается в том, что у вас есть возможность применить несколько анимаций к одному объекту, разделяя анимации запятыми.

Вот пример использования сокращения:

 .box animation: moveObject 2s ease-in-out, fadeBox 3s linear;

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

 .box animation-name: moveObject, fadeBox; animation-duation: 2s, 3s; animation-timing-function: ease-in-out, linear;

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

Завершение этого руководства по CSS-анимации

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