How to apply Conditional content for Outlook webmail

Question

So I created an interactive html email, but for some reason outlook.com ignores the conditional content. When I add the the conditional content to the email then the email breaks in apple mail. Basically the email is suppose to fade in and have snow fall and it works perfectly and the other outlook render just the regular email fin, but outlook.com doesn't load the fade in content and if you add conditional it wont fade in on apple mail. This is what I tried

[class=".x_showlater"]{opacity:1;}

But this cause apple mail to set the opacity to 1 for showlater and outlook.com still doesn't show opacity to 1. I also tried to using

<!--[if mso]> <![endif]-->

and setting opacity:1!important; but then it also does this in apple mail. I also tried to wrap the whole interactive part in <!--[if !mso]> <!----> <!-- <![endif]--> but outlook.com still reads the code.

 <style> @media screen and (-webkit-min-device-pixel-ratio:0), (-ms-high-contrast: none), (-ms-high-contrast: active){ .ball-shadow{ animation: shadow 2s forwards; display:block!important; max-height:none!important; position:relative; } .ball{ z-index:100; animation: drop 2s forwards; position:relative; } [class=".x_showlater"]{ opacity:1;} .showlater,.showlater2{ opacity:0; animation: showlater 0.5s 2s forwards; } .showlater2{ animation-delay: 5.2s; } } @keyframes drop{ 0%{ opacity:0; } 25%{ opacity:0; transform:translateY(-30px); } 80%{ opacity:0.9; } 100%{ opacity:1; transform:translateY(30px); } } @keyframes shadow{ 0%{ opacity:0; } 40%{ opacity:0; transform: scale(0.8); } 100%{ opacity:1; transform: scale(1); } } @keyframes showlater{ from{opacity:0;} to{opacity:1;} } </style> <style> @media screen and (-webkit-min-device-pixel-ratio: 0) { .snowcontainer{ position:relative; width:100%; overflow:visible; } .fallingSnow { text-align: center; } .fallingSnow span { display: inline-block; width: 20px; height: 21px; margin: -280px 60px 54px -34px; background:url("https://i.imgur.com/kMATQ2d.png"); -webkit-animation: fallingSnow 12s infinite cubic-bezier(0.35,0.45,0.39,0.29); -moz-animation: fallingSnow 12s infinite cubic-bezier(0.35,0.45,0.39,0.29); } .fallingSnow span:nth-child(5n+5) { -webkit-animation-delay: 1.3s; -moz-animation-delay: 1.3s; } .fallingSnow span:nth-child(3n+2) { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; } .fallingSnow span:nth-child(2n+5) { -webkit-animation-delay: 1.7s; -moz-animation-delay: 1.7s; } .fallingSnow span:nth-child(3n+10) { -webkit-animation-delay: 2.7s; -moz-animation-delay: 2.7s; } .fallingSnow span:nth-child(7n+2) { -webkit-animation-delay: 3.5s; -moz-animation-delay: 3.5s; } .fallingSnow span:nth-child(4n+5) { -webkit-animation-delay: 5.5s; -moz-animation-delay: 5.5s; } .fallingSnow span:nth-child(3n+7) { -webkit-animation-delay: 8s; -moz-animation-delay: 8s; } @-webkit-keyframes fallingSnow { 0% { opacity: 1; -webkit-transform: translate(0, 0px) rotateZ(0deg); } 75% { opacity: 1; -webkit-transform: translate(100px, 600px) rotateZ(270deg); } 100% { opacity: 0; -webkit-transform: translate(150px, 800px) rotateZ(360deg); } } @-moz-keyframes fallingSnow { 0% { opacity: 1; -webkit-transform: translate(0, 0px) rotateZ(0deg); } 75% { opacity: 1; -webkit-transform: translate(100px, 600px) rotateZ(270deg); } 100% { opacity: 0; -webkit-transform: translate(150px, 800px) rotateZ(360deg); } } </style>

 <div class="containerSnow" style="height: 100%;"> <div class="fallingSnow showlater"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <table class="gmail-fix" width="100%" bgcolor=”#FFFFFF” style=" min-width:320px;" cellspacing="0" cellpadding="0"> <tbody><tr> <td> <table class="w-100p" width="650" align="center" style="max-width:650px; margin:0 auto;" cellpadding="0" cellspacing="0"> <!-- header --> <tbody><tr> <td class="p-15 showlater" style="padding:9px 38px 26px; border-bottom:3px solid #00aeef;"> <a style="text-decoration:none;" href="#"> <img src="#" width="230" style="width:230px; font:14px/18px Arial, Helvetica, sans-serif; color:#00acee; vertical-align:top;" alt="Circle"> </a> </td> </tr> <!-- content --> <!-- block --> <tr> <td class="ptb-30" class="container" style="padding:41px 15px 52px;"> <table class="w-100p" width="560" align="center" style="max-width:560px; margin:0 auto;" cellpadding="0" cellspacing="0"> <tbody><tr> <td style="padding:0 0 30px; font:16px/24px Helvetica, Arial, sans-serif; color:#000;"><center> <table> <tbody> <tr> <td> <div><a href="#"><img border="0" img="" style="display: block; margin: 0 auto; height: auto; width: 554px; max-width: 100%;" src="#" alt="alt"></a></div> <div class="ball-shadow"> <a href="#"><img border="0" img="" style="display: block; margin: 0 auto; height: auto; width: 554px; max-width: 100%;" src="#" alt="alt"></a></div> <!--[if gte mso 9]> <br /> <![endif]--> <br> <div class="ball-shadow"> <center><a href="#"><img border="0" width="362" img="" style="display: block; margin: 0 auto; height: auto; width: 100%; max-width: 362px;" src="#" alt="alt"></a></center></div> </td> </tr> </tbody> </table> </center> <div class="showlater"> <br> Hi, <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut eros non massa malesuada cursus quis et purus. Proin eget dui efficitur, accumsan purus in, condimentum sapien. Aenean nec maximus tortor. Proin massa urna, euismod sit amet risus a, condimentum pellentesque ex. Mauris tincidunt turpis vel ex egestas egestas. Nunc maximus venenatis volutpat. Integer ultricies malesuada metus ut varius. Phasellus in dui tortor. In molestie sodales massa nec lobortis. Sed mattis ex non nunc consectetur, et porta dolor fringilla. Nam orci magna, lacinia vitae efficitur vel, facilisis ut sem. Vestibulum dictum ullamcorper urna sit amet blandit. Etiam at sollicitudin leo. In et orci nec sapien semper sagittis. Nulla facilisi. Etiam nec sem tincidunt, finibus quam nec, egestas neque. </div>

Answer 1

opacity works on Outlook.com, but not on most versions of Outlook.

https://www.campaignmonitor.com/css/positioning-display/opacity/

z-index does not work in most versions of Outlook and most email clients.

https://www.campaignmonitor.com/css/positioning-display/z-index/

animation will not work with most email clients.

https://www.campaignmonitor.com/css/animations/animation/

If things are working at all for you, that's great. I might suggest looking for alternatives if you want to reach a larger Outlook audience.

Good luck.

Answer 2

So, I finally figured it out.

[class~="x_showlaterout"], [class~="x_showlater2out"]{   /* work around for outlook.com */
                    opacity:1 !important;
            }

You need to create a class styling like this [class~="x_classname"]{outlook.com specific code } because outlook.com automatically changes any class to include x_ . After you do that then you add the class to the element you want to affect but with out the x_ . So in this case it would be showlaterout and showlater2out . This let you have the effect you want, but then when a user opens it on outlook.com it will change the class to x_showlater2out and x_showlaterout which will apply the style you created because the classes now match