I'm trying to make an animated outlook signature. I'm definitely a novice coder, but I thought this was a project I could maybe do. I used VS Code to make a basic signature:
<head><style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
@keyframes testt {
0% {
width: 0px;
left: 0;
}
50% {
width: 80px;
left: 0;
}
100% {
width: 0px;
left: 80px;
}
}
#aaaa {
background-color: #00ffff;
animation: testt 3s ease-in-out infinite;
height: 33px;
position: fixed;
top: 0;
left: 0;
}
#aaa {
font-family: Helvetica;
margin-top: 7px;
margin-left: 7px;
}
</style>
</head>
<body>
<p id="aaa">John Doe</p>
<div id="aaaa"></div>
</body>I used weird names for everything because this was just supposed to be a test run, not to be remembered or kept.
Anyway, I realized how hard it would be when the position: fixed caused the blue <div> element to go to the very top of the section, not the signature. I got all of the problems ironed out, and it looked perfect in the
signature area.
Then, I sent a test email - and only the text showed up where my signature was. I inspected the email and it seemed outlook deleted the div and also changed the ids I had set. The <style> I had was also completely gone. What happened, and is there a way to circumvent this to impress my friends with an animated signature?