如何让 CSS 动画在电子邮件中发挥作用？

Question

我正在尝试学习如何在电子邮件中发送 CSS 动画，但是当我将 css 动画示例发送到我的 outlook 时，它不起作用。即使当我尝试在单独的浏览器中打开时，我看到的也只是一张红色图片，没有预期的动画效果。我正在使用 SmtpClient class 并且我已经激活了 isbodyhtml = true

我想要的是在我的电子邮件中看到动画。我尝试找到如何在电子邮件中发送 css 动画的完成示例，但 none 已经成功。

string smtpserver = "XXXX.XXXX.XXXX";
int smtpport = 25;
NetworkCredential credentials = null;
bool enableSSL = false;
SmtpClient smtp = new SmtpClient();
smtp.Host = smtpserver;
smtp.Port = smtpport;
smtp.Credentials = credentials;
smtp.EnableSsl = enableSSL; //smtp.EnableSsl = true;
Console.WriteLine("Sending email to [" + toEmail + "] with [" + smtpserver.ToString() + ":" + smtpport.ToString() + "]");
MailMessage mail = new MailMessage();
mail.From = new MailAddress(fromEmail);
string[] mailAddresses = toEmail.Split(';');

foreach (string mailAddress in mailAddresses)
{
    mail.To.Add(new MailAddress(mailAddress));
}

mail.Subject = "Urgent! Disco Disco!";
body = @""+
"<!DOCTYPE html>"+
"<html>"+
"<head>"+
"<style>"+
"div {"+
"  width: 100px;"+
" height: 100px;"+
" background - color: red;"+
" -webkit - animation - name: example; /* Safari 4.0 - 8.0 */"+
" -webkit - animation - duration: 4s; /* Safari 4.0 - 8.0 */"+
" animation - name: example;"+
" animation - duration: 4s;"+
"}"+
"/* Safari 4.0 - 8.0 */"+
"@-webkit - keyframes example {"+
"   from { background - color: red; }"+
"  to { background - color: yellow; }"+
"}"+
"/* Standard syntax */"+
"@keyframes example {"+
"from { background - color: red; }"+
"to { background - color: yellow; }"+
"}"+
"</style>"+
"</head>"+
"<body>"+
"<p><b> Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>"+
            "<div></div>"+
"<p><b> Note:</b> When an animation is finished, it changes back to its original style.</p>"+
"</body>"+
"</html>";
mail.Body = body;
mail.IsBodyHtml = true;

try
{
    if (files != null)
    {
        foreach (string file in files)
        {
            mail.Attachments.Add(new Attachment(file));
        }
    }
}
catch (Exception ex)
{
    Console.WriteLine("Error attaching attachment" + "[" + ex.Message + "]");
}
AutoResetEvent waiter = new AutoResetEvent(false);
smtp.SendCompleted += (s, e) => { mail.Dispose(); };
smtp.SendCompleted += new SendCompletedEventHandler(SendCompletedCallback);
smtp.SendAsync(mail, waiter);
waiter.WaitOne(5000);
Console.WriteLine("SendAsync completed.");

Answer 1

你可以不用这个试试吗"<h1> test </h1>"

我已经用 chrome 和 edge 试过了，它没有动画

这是我试过的

<!DOCTYPE html>
<html>
<head>
<title>myTitle</title>
<style>
div {
  width: 100px;
 height: 100px;
 background-color: "red";
 -webkit-animation-name: "example"; /* Safari 4.0 - 8.0 */
 -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
 animation-name: example;
 animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes "example" {
   from { background-color: red; }
  to { background-color: yellow; }
}
/* Standard syntax */
@keyframes example {
from { background-color: red; }
to { background-color: yellow; }
}
</style>
</head>
  
<body>
<p><b> Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
            <div></div>
<p><b> Note:</b> When an animation is finished, it changes back to its original style.</p>
</body>
</html>

如何让 CSS 动画在电子邮件中发挥作用？

How do I get CSS Animations to work in email?

css

c#

smtpclient

css-animations