Установить атрибуты ключевого кадра CSS-анимации в содержании HTML-содержимого электронной почты

Question

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

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

 @keyframes colorblink { 
  0% { }
  50% { color:black; } 
 }

перед вызовом.

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

Answer 1

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

Этот фрагмент позволяет вам ориентироваться на почтовые клиенты, работающие на Webkit (в основном на устройствах iOS)

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /* Build animation CSS here */
}

На устройства iOS приходится (очень) примерно 25% открытий электронной почты, поэтому вам нужно взвесить, стоит ли это усилий для вашей клиентской базы или нет.

Answer 2

Большинство популярных почтовых клиентов поддерживают <style>.

Campaign Monitor поддерживает веб-страницу того, что в настоящее время возможно с основными почтовыми клиентами и CSS.

https://www.campaignmonitor.com/css/