有没有办法在MailChimp模板中使用CSS3动画/ @关键帧

Question

受this HTML newsletter,的启发，我决定在MailChimp模板中加入一些关键帧动画。动画本身在本地运行很好，但当它上传到MailChimp时，@keyframe规则和%被剥离。它来自于......

@keyframes fadein {
    0% { opacity:0 }
    100% { opacity:1 }
}

......对......

0 { opacity: 0 }
100 { opacity:1 }

看起来MailChimp没有解析它并剥离元素。我没有太多运气搜索MailChimp支持任何关于此的信息。有没有人找到一个聪明的方法来解决这个问题？

Answer 1

MailChimp声明CSS应该是内联的，或者可能存在被剥离的风险：

http://kb.mailchimp.com/article/the-css-in-my-campaign-is-not-working-or-is-getting-stripped/

不要将CSS放在HTML电子邮件中的HEAD标记内。

在对网页进行编码时，传统上将CSS代码放在HEAD标记之间，位于内容之上。但是，当在基于浏览器的电子邮件应用程序（如YahooMail！，Gmail，Hotmail等）中查看HTML电子邮件时，这些应用程序默认情况下会删除HEAD和BODY标记。

我们建议您将CSS代码内嵌到您的内容中（注意：基于浏览器的电子邮件应用程序也会删除您的BODY标记，因此任何背景颜色或BODY设置都应使用100％宽的TABLE“封装器”处理您的电子邮件）。

它们具有自动CSS内联功能：

http://www.mailchimp.com/kb/article/how-does-the-css-inliner-work

MailChimp有一个CSS选择器列表，在这里找到的电子邮件客户端支持：

http://templates.mailchimp.com/resources/email-client-css-support

客户特定的风格：

http://templates.mailchimp.com/development/css/client-specific-styles

Answer 2

您可以通过将所需的CSS放在外部CSS文件中来使用带有Mailchimp的CSS3动画，例如

<link rel="stylesheet" href="https://example.com/email/style.css">

我已经成功完成了许多电子邮件活动，它们在iPhone，iPad和Mac上看起来很不错。

Answer 3

刚刚通过MailChimp的支持确认了它;他们目前不支持这种程度的自定义，任何不受支持的代码都会被编辑器自动删除。耻辱。