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的支持证实了这一点;他们目前不支持这种程度的自定义，任何不受支持的代码都会被编辑器自动删除。羞。

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

3 个答案: