Анимации в CSS для email: переходы и анимации по ключевым кадрам

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

Одним из распространенных способов улучшения писем является добавление анимации и движения в кампанию. Движение помогает привлечь внимание к определенному контенту и вовлечь пользователя. Традиционно движение в email достигалось с помощью анимированных GIF, однако CSS-анимации иногда могут быть более эффективным решением.

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

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

## Почему стоит использовать CSS-анимации?

CSS-анимации существуют уже много лет, но только недавно начали широко применяться как в веб-, так и в email-индустрии. Долгое время анимация на вебе создавалась либо с помощью проприетарных инструментов, таких как Adobe Flash или Microsoft Silverlight, либо в виде анимированных GIF — формата изображений, позволяющего создавать анимации на основе кадров. Поскольку почтовые клиенты никогда не поддерживали использование Flash или Silverlight в почтовом ящике, маркетологам оставалось использовать анимированные GIF, если они хотели добавить движение в свои кампании.

Ситуация в значительной степени не изменилась. Согласно нашему исследованию «Состояние email в 2018 году», 78% брендов используют анимированные GIF в своих кампаниях, тогда как только 30% применяют CSS-анимации.

Хотя анимированные GIF имеют более широкую поддержку, CSS-анимации обладают рядом преимуществ при правильном использовании.

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

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

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

## Два типа анимации

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

### Переходы

CSS-переходы делают именно то, что подразумевает их название: они переводят элемент из одного состояния в другое, анимируя его в процессе. Лучший способ понять CSS-переход — рассмотреть пример.

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

Как видно из CSS, у кнопки есть два состояния: обычное и состояние **:hover**, которое меняет цвета фона. Применяя свойство **transition** к стандартному состоянию кнопки, мы можем добавить плавную анимацию перехода между двумя состояниями.

Свойство **transition** принимает несколько значений, включая свойства **property**, **timing** и **easing function**, которые определяют, как будет воспроизводиться анимация. В нашем примере свойство transition установлено на **all**, что анимирует все CSS-свойства этого элемента. Время установлено на 0.6 секунды, чтобы анимация не была слишком долгой и не казалась медленной, а функция сглаживания установлена на **ease**, что естественным образом сглаживает анимацию в начале и конце.

Интересно то, что CSS-переходы можно комбинировать с другими CSS-свойствами для создания действительно интересных эффектов. Если мы хотим привлечь еще больше внимания к нашему CTA, мы можем добавить два дополнительных CSS-свойства — **box-shadow** и **transform** — чтобы придать кнопке трехмерный вид.

Прелесть CSS-переходов заключается в их простоте. Всего одной строкой кода можно создать красивую анимацию между двумя состояниями. А в сочетании с другими возможностями CSS можно творить настоящие чудеса в email.

Ознакомьтесь с этими ресурсами, чтобы узнать больше о том, что можно сделать с помощью CSS-переходов:

— Документация по CSS Transition (Mozilla Developer Network)

— Использование CSS Transitions (Mozilla Developer Network)

### Анимации по ключевым кадрам

Помните, как в детстве делали флипбуки из блокнота с заметками Post-It? Вспомните, как пролистывание рисунков позволяло создать собственный маленький мультфильм. Анимации по ключевым кадрам в CSS работают аналогичным образом. Вместо того чтобы рисовать каждый отдельный кадр, можно использовать код для настройки отдельных «страниц» или «кадров» анимации и доверить CSS анимацию между этими кадрами. Анимации по ключевым кадрам немного сложнее переходов, но эта сложность дает больше возможностей.

Опять же, лучший способ понять анимации по ключевым кадрам — рассмотреть пример.

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

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

Внутри этого CSS-правила я установил два кадра анимации: **from** и **to**. Первый — **from** — это начальное состояние анимации и использует свойство transform без реальных значений, чтобы обозначить начальное положение стрелки. Второй кадр — **to** — это конечное положение. Опять же, используя **transform**, я переместил стрелку на 60 пикселей ниже.

Можно создавать более сложные анимации на основе кадров, заменяя ключевые слова from и to процентами для обозначения отдельных кадров. Например, если я хочу создать анимацию с пятью кадрами вместо двух, я могу добавить CSS-свойства на 20%, 40%, 60%, 80% и 100%, при этом каждое множество свойств заключается в фигурные скобки, как в приведенном выше коде.

После настройки ключевых кадров необходимо запустить анимацию. Для этого мы нацеливаемся на HTML-элемент, который хотим анимировать, и добавляем к нему свойство animation. В приведенном выше примере я нацелился на **div** с классом **animate**. Внутри свойства **animation** можно указать ряд значений для определения поведения анимации. К ним относятся:

— animation-delay

— animation-direction

— animation-duration

— animation-fill-mode

— animation-iteration-count

— animation-name

— animation-play-state

— animation-timing-function

Не все из них необходимы в каждой создаваемой CSS-анимации. В нашем примере я использовал только продолжительность, функцию сглаживания, количество итераций и направление. Продолжительность указана в секундах (**1s**), а функция сглаживания установлена на **ease**. Поскольку я хочу, чтобы анимация повторялась, я установил количество итераций на **infinite** и затем **reverse** для направления после завершения.

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

Хотя это базовый пример анимаций по ключевым кадрам, он, надеюсь, даст вам представление о том, что возможно в email, если вы хотите выйти за рамки анимированных GIF.

## Поддержка

Хотя CSS-анимации имеют множество преимуществ, основным их недостатком является ограниченная поддержка в почтовых клиентах.

Стоит также отметить, что поддержка имеет некоторые нюансы, о которых Джастин Коо упоминает в разделе «Особенности клиентской поддержки» на своей отличной странице поддержки Kinetic Email CSS.

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

## Вдохновение для анимации

Многие специалисты в email-индустрии используют CSS-анимации, включая Litmus! Чтобы лучше понять, что возможно с помощью CSS-анимаций, мы собрали некоторые из наших любимых кампаний:

— Письмо о запуске Litmus Builder, в котором CSS-анимации используются для интерактивного ознакомительного тура по продукту

— Оригинальное письмо B&Q с каруселью, которое положило начало тренду на интерактивность и использует CSS-анимации для плавного переключения фоновых изображений

— Письмо о продукте Nest, в котором используется один CSS-переход для красивой смены изображений

— Эта игра Sonic The Hedgehog, в которой CSS-анимации обеспечивают все внутриигровые движения

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