Как использовать задержку анимации CSS

Маркетологам важно создавать не только информативный, но и увлекательный контент.

Некоторые маркетологи добиваются этого, добавляя анимацию в свои статьи – достаточно взглянуть на любую статью BuzzFeed, заполненную GIF-файлами.

Источник

Анимация – это интересный способ заинтересовать пользователей и привлечь внимание к содержанию вашего сайта. Но с анимацией можно делать гораздо больше, помимо мемов GIF.

Раньше простая анимация создавалась с помощью Flash. Однако использование Flash (для веб-контента) может замедлить работу вашего сайта.

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

Анимации, которые не замедляют работу вашего сайта, также можно создавать с помощью кода. Один из способов создания анимации – использовать Javascript, который является одним из самых сложных языков программирования для изучения.

Хорошие новости?

Для создания анимации вы можете использовать CSS (каскадные таблицы стилей), который представляет собой легкий язык кодирования, который идеально сочетается с HTML.

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

Вкратце, CSS описывает, как элементы HTML отображаются на веб-странице. Они могут быть статическими (неподвижными) или анимированными.

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

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

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

• @Keyframes – это основа анимации CSS. Они указывают начало и конец анимации и описывают, как каждый элемент должен вести себя на каждом этапе анимации.
• Свойства анимации объединяют элементы CSS с @keyframes для дальнейшего определения характера анимации.

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

Задержка постепенного появления анимации CSS

Свойство animation-delay устанавливает, сколько времени пройдет до начала анимации. Выражается в секундах и миллисекундах.

Это свойство имеет три предопределенных значения: время, начальное и наследование.

Во-первых, устанавливает определенное количество секунд или миллисекунд до начала анимации. Если значение положительное, например 2 с или 500 мс, анимация начинается по истечении этого времени.

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

Круто, правда?

Во-вторых, <initial > возвращает свойство к значению по умолчанию для элемента.

В-третьих, <наследование > превращает свойство в дочерний элемент родительского элемента.

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

Вот несколько простых примеров кода задержки анимации CSS:

1 Анимация, которая начинается через 300 мс.

**div {**

**animation-delay: 300ms;**

**}**

2 Анимация, которая начинается через -300 мс.

**div {**

**animation-delay: -300ms;**

**}**

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

Задержка анимации: 1 с

Задержка анимации: -1 с

Без задержки

Все анимированные

Задержка анимации CSS между итерациями

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

Хотя не существует конкретных свойств для «Задержка анимации CSS между итерациями» или «Задержка постепенного появления анимации CSS», вы, безусловно, можете добиться этих эффектов, комбинируя задержку анимации с другими свойствами анимации, такими как:

• анимация-тайминг-функция: определяет скорость анимации. Предопределенные значения для этого свойства включают: легкость, легкость входа, легкость выхода, легкость выхода, линейная, начальная и наследование.
• animation-iteration-count: Устанавливает, сколько раз будет воспроизводиться анимация. Значение может быть: #, бесконечное, начальное или наследование. Вы можете установить задержку анимации CSS между итерациями на период времени, когда анимация задерживается, прежде чем она снова начнет воспроизводиться. Это полезно, если вы хотите, чтобы анимация запускалась несколько раз, но также хотите создать паузу между каждой итерацией. Вы можете добиться этого, объявив анимацию несколько раз с определенной задержкой анимации для каждого.
• animation-direction: Определяет направление анимации при запуске. Значение может быть нормальным, обратным, альтернативным или альтернативно-обратным.
• animation-fill-mode: устанавливает, какие стили анимации применяются до или после продолжительности анимации. Значения включают: назад, вперед, оба и нормальный.
• animation-play-state: определяет состояние анимации (т.е. воспроизведение или пауза).

Верхний блок вводится легко, нижний – выкладывается. Попробуйте сами на сайте cubic-bezier.com, чтобы увидеть, как сравниваются функции синхронизации.

Чтобы применить эффект постепенного появления, используйте тег <div class = "fade-in">.

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

Задержка анимации CSS

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

Есть еще много удивительных вещей, которые можно сделать с помощью CSS и его аналога HTML. Не только увлекательно возиться с инструментами, но и приобретенные навыки помогут вам разрабатывать более эффективные маркетинговые материалы в Интернете.

Источник записи: https://blog.hubspot.com