Как перезапустить CSS-анимацию в электронной почте, используя псевдокласс: active

1. Использование псевдокласса: active
2. Поддержка: активных в почтовых клиентах
3. Перспектива для iOS
4. Расположение элементов
5. Запуск анимации вручную
6. Примеры
7. откаты
8. Автор: Алекс Ильхан

Эта статья показывает вам технику, чтобы перезагрузить CSS анимация одним щелчком или касанием, используя псевдокласс: active.

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

Хотя CSS свойство animation-play-state поддерживает паузу и запуск, в ней нет свойства, которое заставляет анимацию «перезагружаться». В Интернете перезапуск анимации обычно включает использование Javascript. К сожалению, у нас нет такой роскоши с электронной почтой.

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

Мои фрагменты кода используют префикс -webkit. Это потому что для большая часть анимации работают только в клиентах на основе Webkit.

Использование псевдокласса: active

Ключ к перезапуску CSS-анимации - установить для имени анимации анимации значение «none», а затем вернуть его к исходной анимации.

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

У нас есть два псевдокласса, которые соответствуют нашим потребностям:: hover и: active. Оба эти селектора работают только тогда, когда курсор находится над элементом или когда пользователь щелкает элемент. Поскольку наша цель - перезапустить анимацию, когда пользователь нажимает кнопку «перезапустить», предпочтительным является псевдокласс: active.

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

<style> .box {-webkit-animation: launch 2s; } @ -webkit-keyframes launch {from {transform: translateX (0px); } преобразовать: translateX (250px); }} </ style> <a href="#r" id="replay"> анимация воспроизведения </a> <div class = "anim-container"> <div class = "box"> </ div> </ DIV>

В нашем примере мы устанавливаем для свойства animation значение none, когда пользователь нажимает кнопку «воспроизведение». Когда пользователь отпускает кнопку, селектор: active становится неактивным, и анимация возвращается к исходной анимации, перезапуская анимацию.

#replay: active + .anim-container .box {-webkit-animation-name: нет! важно; }

Посмотреть пример кода

Поддержка: активных в почтовых клиентах

Интересно: active имеет широкую поддержку среди почтовых клиентов на основе Webkit, включая iOS.

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

Однако для перезапуска анимации этот краткий выстрел селектора идеален!

Перспектива для iOS

Outlook в iOS имеет одну причуду, когда нажатие на ссылку с именованным якорем заставит Outlook запустить веб-браузер. Один из способов устранить причуду в Outlook на iOS - быстро убрать элемент, когда активирован селектор: active, предотвращающий срабатывание действующей ссылки и открытие браузера.

Это можно сделать с помощью преобразования CSS translate, чтобы переместить элемент 1000px влево, когда активирован селектор: active. Примечание. Преобразования CSS можно применять только к элементам уровня блока.

#replay: active {transform: translateX (-1000px); }

Кроме того, вы можете использовать изображение в качестве триггера вместо этого. Почтовый клиент iOS по умолчанию будет запускать только селекторы: hover или: active, когда применяется к ссылкам, изображениям или ярлыкам ,

Расположение элементов

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

Что если вы хотите разместить триггер после анимированного элемента? Самый простой способ добиться этого - использовать абсолютное позиционирование или CSS-преобразования, чтобы визуально поместить триггер после анимированного элемента в электронном письме. (Имейте в виду, клиент Samsung Android не поддерживает абсолютное позиционирование ).

Посмотреть пример кода

Запуск анимации вручную

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

<style> #cbox: флажок + .anim-container .box {-webkit-animation: запуск 2s; } #replay: active + .box {-webkit-animation-name: нет! важно; } </ style> <input type = "radio" id = "cbox"> <div class = "anim-container"> <label for = "cbox" id = "replay"> воспроизвести анимацию </ label> <div class = "box"> </ div> </ div>

Посмотреть пример кода

Имейте в виду, что почтовые клиенты, такие как Outlook на iOS и Mac (и некоторые поставщики почтовых услуг, такие как MailChimp) не опорные элементы формы в электронной почте, поэтому вы не сможете применить этот трюк.

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

Примеры

Посмотреть пример электронной почты

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

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

откаты

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

Тестирование на множестве почтовых клиентов - это то, где Email на Acid может сэкономить вам массу времени. Получите более 70 превью за одну минуту, протестировав их с помощью электронной почты на Acid.

Автор: Алекс Ильхан

Приветствуя весь путь из Англии, Алекс привносит свой опыт разработки электронной почты вместе с бесконечным потоком чашек чая и британского цинизма. Следуйте за ним в Твиттере: @omgitsonlyalex.

Похожие

Комментарии