How do I get CSS Animations to work in email?

Question

I Am trying to learn how to send CSS animations in an email but when i send an example of a css animation to my outlook it doesn´t work. Even when I try to open in a seperate browser all I see is a red picture and without the expected animation. I am using the SmtpClient class and I have activated isbodyhtml = true

What I want is to see the animation in my email. I´ve tried finding finished examples of how to send css animations in email but none have worked.

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.");

Have you tried this html separately in a fiddle or something? Does it do what you want when not sent as an e-mail? — AsheraH, Dec 06 '19 at 08:22
Yes, it is an example from w3school. https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation1 — Rawmouse, Dec 06 '19 at 10:52

Alan M · Accepted Answer · 2019-12-06T12:15:06.150

Can you try without this "<h1> test </h1>"

I have tried it with chrome and edge, it did not animate

This is what I have tried

<!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>

Appology from me. I did correction now to your original html code and css. It is animating now. Please try to add it into your email code and see it it works. Now it works under Chrome and Edge and IE 11.8 . Let the community knows what is the result — Alan M, Dec 06 '19 at 12:13
It does work in the browser but it still doesn´t play in the email. Although now I see the red colour. — Rawmouse, Dec 06 '19 at 13:17

How do I get CSS Animations to work in email?

1 Answers1