How do I get CSS Animations to work in email?

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

Solution

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>