有没有办法在 MailChimp 模板中使用 CSS3 动画/@keyframes答案

【问题标题】：Is there a way to utilise CSS3 animations/@keyframes in a MailChimp template有没有办法在 MailChimp 模板中使用 CSS3 动画/@keyframes
【发布时间】：2019-04-16 20:08:54
【问题描述】：

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

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

...到这个...

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

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

【问题讨论】：

MailChimp 有一个 CSS 选择器列表，这些选择器在其电子邮件模板参考中的电子邮件客户端中找到：templates.mailchimp.com/resources/email-client-css-support - 以及特定于客户端的样式：templates.mailchimp.com/development/css/client-specific-styles -
@jonathan 从技术上讲，我的问题与 CSS 选择器无关/过去无关，但这些都是对未来有用的资源，所以感谢那些！

标签： css animation mailchimp

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

虽然我喜欢将您的答案标记为正确答案，但它实际上并不能解决我的问题。 MailChimp（当前）不支持 @keyframe 动画，无论是否内联。 +1 提供有用的链接。
@Dre 不用担心，只需从 MailChimp 分享这些链接，因为我也遇到了类似的问题

【解决方案3】：

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

【讨论】：

我还可以确认，这在活动编辑器所见即所得或模板创建器中都不起作用。
感谢您确认@max_w。我猜我将不得不放弃该功能，直到您添加对它的支持（如果他们这样做的话）。这不是最大的损失；无论如何，目前邮件客户端对 CSS3 动画的支持非常低。