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

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

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

Эта статья показывает вам технику, чтобы перезагрузить 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 не поддерживает абсолютное позиционирование ).

(Имейте в виду, клиент 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>

важно;  } </ 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.

Похожие

Как создать баннер
Разработка виниловый баннер это просто; однако, разработка эффективного винилового баннера может быть легко пропущена . Много раз, ваша виниловая баннерная компания предлагает предоставить дизайнерские услуги, или они могут позволить вам представить свои собственные произведения искусства. В этой статье давайте поговорим о том, как правильно выложить не только визуально привлекательный виниловый
Как очистить историю поиска Google на Android
... элементов из истории поиска не может быть проще. Во-первых, откройте Google Now любым способом, который вы обычно делаете: сдвиньте его с главного экрана, если вы используете панель запуска Google Now, нажмите и удерживайте нажатой кнопку «Домой», чтобы открыть «Сейчас при касании», или любым другим способом, который поможет вам. в Google сейчас. Оттуда коснитесь поля поиска
Как остановить Facebook от публикации вашего местоположения
Снимок экрана Шарон Вакнин / CNET Facebook снова работает над этим, выпустив еще одну функцию, от которой у меня никогда не было возможности вежливо отказаться: обмен информацией о местоположении. когда Facebook решил отозвать усилия Благодаря своей кратковременной службе регистрации, Places, он быстро внедрил
Энциклопедия жизни и творчества Ивана Франко
Прочищайте путь свободы и правды смело Иван Франко (1856 - 1916) - знаменитый украинский деятель, будитель и просветитель украинского народа. На время его рождения украинский дух в Галичине едва тлел под двойным гнетом австрийской бюрократии
Вот как Lady Gaga получила свое сценическое имя - SheKnows
... в этом году она доказала, что она потрясающая актриса, заработав свою первую номинацию на лучшую женскую роль Оскара за роль в фильме «Звезда рождается» . Имя Гага теперь является синонимом величия, но Мать-Монстр не родилась с легендарным названием. Так, как Леди Гага придумала свое сценическое имя ? И как ее настоящее имя? Что ж, она провела лучшую часть
Свадебная фотосессия STEP BY STEP (Как? Где? За сколько?)
Выбор фотографии и места, где должны быть сделаны свадебные фотографии, является одним из наиболее важных решений, связанных с изменением семейного положения. Многие пары платят несколько тысяч злотых за такой сувенир. Это правильно? Да, при условии, что фотографии сделаны профессионалом. В этом случае действительно стоит инвестировать в то, что останется с нами подольше. - Мы всегда говорим парам, что фотограф или оператор будет профессионально и профессионально заниматься
Мы не так совершенны, как наши планшеты
Быстро, эффективно, в дополнение к хорошему жилью. iPad, планшет с Windows или Android. Каждый хотел бы иметь один. И, между прочим, каждый хотел бы, чтобы его воспринимала и окружающая среда. Как ракета, супермен, стильный человеческий компьютер. К сожалению, мы все еще люди. Я всегда был очарован искренней преданностью идее. Политический, религиозный или философский - не важно, какая страсть важна. Но быть сторонником какой-то идеи - это пикник, когда вы поддерживаете какой-то
В AtomStore мы прилагаем все усилия, чтобы сделать нашу платформу лучшей системой электронной коммерции в Польш...
В AtomStore мы прилагаем все усилия, чтобы сделать нашу платформу лучшей системой электронной коммерции в Польше. Что это значит? Определения «лучшей» системы могут быть разными и зависеть от потребностей людей, выбирающих решение. Для мелкого продавца лучшей системой будет та, которая позволит вам быстро и легко управлять современным безупречным магазином по низкой цене. Для такого продавца продвинутые решения могут быть ненужными или могут даже препятствовать началу работы. Мы направляем
Как интерпретировать новые отчеты о результатах ACT
К счастью, баллы ACT STEM и ELA обычно не используются для поступления в колледж; они существуют для школьных и районных администраторов. Для получения дополнительной информации о школах, которые требуют письменного задания, пожалуйста, смотрите наш сообщение в блоге на требованиях эссе. Другими словами, студентам не нужно беспокоиться о баллах STEM и ELA . Что такое «контрольный
Как подать заявку на тест ACT
... ваться на тест ACT (American College Testing) по электронной почте или через Интернет. Тест ACT рекомендует учащимся пройти регистрацию в ACT через Интернет, потому что это быстрее. Студенты также могут сразу увидеть, есть ли место в выбранном ими тестовом центре. Заявители могут распечатать свой входной билет сразу после отправки платежа. Регистрация онлайн Чтобы
Дешевые звонки с вашего мобильного телефона на иностранные номера
TeleCube предлагает не только функции / услуги на сайте. Часто бывает, что клиентам нужно конкретное решение, соответствующее их потребностям. Мы хотели бы представить один из них здесь, с мыслью, что это может быть полезно

Комментарии

Как вы находите оригинальную идею для уникального свадебного подарка каждый раз, когда у вас есть церемония?
Как вы находите оригинальную идею для уникального свадебного подарка каждый раз, когда у вас есть церемония? У нас есть то, что может вдохновить вас. Вот идеи для оригинального свадебного подарка - ведь ничто не улавливает момент лучше, чем фотографии. Ностальгически для родителей Постоянной точкой свадьбы
Как измерить специфичность?
Как измерить специфичность? Запомните, как измерить специфичность. «Начните с 0, добавьте 1000 для атрибута стиля, добавьте 100 для каждого идентификатора, добавьте 10 для каждого атрибута, класса или псевдокласса, добавьте 1 для каждого имени элемента или псевдоэлемента. Так в body #content .data img: hover значение специфичности будет 122 ( 0,1,2,2 или 0122): 100 для #content, 10 для .data, 10 для: hover, 1 для body и 1 для
И как ее настоящее имя?
И как ее настоящее имя? Что ж, она провела лучшую часть двух десятилетий под именем Стефани Джоан Анжелина Джерманотта, но давайте окунемся в то, как она заработала свою знаменитую сценическую прозвище. Конечно, «Lady Gaga» звучит круто и легко скатывается с языка, но мы задались вопросом, было ли какое-то особое значение в названии. Естественно, наше любопытство привело к некоторым легким интернет-исследованиям: «Где Леди Гага получила свое сценическое имя?», Которые мы набрали в поиске Google,
Интернет-кредиты как доказательство - возможно ли это?
Интернет-кредиты как доказательство - возможно ли это? Быстрые кредиты через Интернет в качестве доказательства предоставляются небанковскими компаниями, также известными как кредитные компании или parabanks. В отличие от кредитов, которые доступны только в предложении банков, кредиты предоставляются с минимальными формальностями . Чтобы получить деньги, вам обычно нужна только ваша идентификационная карта.
Как заказать ридер из Германии?
Как заказать ридер из Германии? Это предложение стоит использовать, хотя оно довольно сложное. Все потому, что немецкая Amazon отправляет свои товары исключительно в Германию, Австрию, Швейцарию и Нидерланды. Поляки перенаправляются в магазин Amazon.com, где цены выше. Тем не менее, можно воспользоваться предложением посредников, таких как Mailbox.de. После регистрации на нем, адрес брокера будет отправлен на наш электронный адрес.
Как?
Как? Это просто ... Вы звоните со своего мобильного телефона на свой номер в TeleCube (упомянутый выше), затем вводите PIN-код и номер телефона, на который хотите позвонить. И ... вот и все, вы говорите и платите, например, всего 5 гроши нетто в минуту за стационарный номер в Германии, то есть в соответствии с прайс-листом TeleCube (конечно, если у вас бесплатные звонки или вы используете бесплатные минуты для звонков из своей мобильной подписки) стационарные номера в Польше, в
Как долго это слишком долго?
Как долго это слишком долго? Почему нельзя найти один быстрый ответ на этот вопрос и быстро его объявить миру? По многим причинам. Многие факторы могут влиять на уровень конверсии, например, сезонность, время суток, экономическая ситуация, позиционирование конкурентов, источники трафика и т. Д. Кроме того, уровень трафика на вашем сайте также является определяющим фактором продолжительности теста. Вот наш совет: используйте статистические инструменты,
Как это круто?
Как это круто? Теперь вы можете взять эти файлы и отправить их кому-нибудь (кому нужны PDF-файлы ?!) или разместить их на своей веб-странице, просто скопировав и вставив папки в выбранное место. Хотя QGIS2WEB никогда не будет конкурировать с подобными ArcGIS Online или Geoserver, он предоставляет чрезвычайно быстрый и эффективный способ предоставления
Как люди?
Как люди? Для этого мы можем прекрасно понять других людей. Если мы только делаем это, это одна из задач, с которыми мы сейчас имеем дело. * PS. Я не намеренно цитирую все исследования, о которых я упоминаю, и я не переписываю половину текста Р. Севиорки - это так хорошо, что вам просто нужно прочитать его отдельно. Я поощряю.
Что такое «контрольный показатель готовности колледжа» и как мои результаты сравниваются с результатами других учащихся?
Что такое «контрольный показатель готовности колледжа» и как мои результаты сравниваются с результатами других учащихся? Фиолетовая линия в каждом отдельном столбце теста отражает «эталон готовности к колледжу», балльную оценку, при которой учащийся имеет 50% -ный шанс заработать B или выше в соответствующем первом классе колледжа. Студенты могут испытывать искушение оценить успеваемость, сравнивая оценки по предметам. Однако,
Как ты можешь винить его?
Как ты можешь винить его?

Что если вы хотите разместить триггер после анимированного элемента?
Так, как Леди Гага придумала свое сценическое имя ?
И как ее настоящее имя?
Как?
Где?
За сколько?
Это правильно?
Что это значит?
Как вы находите оригинальную идею для уникального свадебного подарка каждый раз, когда у вас есть церемония?
Как измерить специфичность?