0

受这份 HTML 时事通讯的启发，我决定在 MailChimp 模板中加入一些关键帧动画。动画本身在本地效果很好，但是当它上传到 MailChimp 时，@keyframe规则和规则就%被删除了。从此...

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

……到这……

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

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

4

3 回答 3

2

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

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

我已经通过一些电子邮件活动成功地做到了这一点，它们在 iPhone、iPad 和 Mac 上看起来不错。

于 2015-07-13T14:29:42.540 回答
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

于 2013-11-14T13:27:33.403 回答
0

刚刚得到 MailChimp 支持的确认；他们目前不支持这种程度的定制，任何不受支持的代码都会被他们的编辑器自动删除。耻辱。

于 2013-11-06T11:33:54.247 回答