{"id":3805,"date":"2018-07-20T02:27:01","date_gmt":"2018-07-20T02:27:01","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=3805"},"modified":"2018-08-02T15:41:06","modified_gmt":"2018-08-02T15:41:06","slug":"using-webkit-is-no-longer-needed-for-css-animations-in-email","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/using-webkit-is-no-longer-needed-for-css-animations-in-email\/","title":{"rendered":"Using  -webkit no Longer Needed for CSS Animations in Email"},"content":{"rendered":"<p>Its 2018 and email clients that support CSS animations no longer require the -webkit vendor prefix when using the animation CSS property or @keyframes rule.<\/p>\n<p>When <a href=\"https:\/\/freshinbox.com\/blog\/the-dawn-of-kinetic-email\/\">kinetic email<\/a> design started to gain interest around 2014, the primary email client that supported animations was the iPhone email client on iOS 8, which required the -webkit vendor prefix for animations. However later iOS versions (9 and above) no longer require the -webkit prefix. According to <a href=\"https:\/\/data.apteligent.com\/ios\/\">this report<\/a> 99% of Apple devices are now on iOS 9 and above.<\/p>\n<h4>Example:<\/h4>\n<div class=\"slidebox\"><\/div>\n<style>\n.slidebox{\n  width:50px;\n  height:50px;\n  background-color:blue;\n  animation: slidebox 5s ease alternate infinite;\n}\n@keyframes slidebox{\nfrom{ transform:translateX(0px);}\nto{ transform:translateX(200px);}\n}\n<\/style>\n<p><b>With -webkit prefix<\/b><\/p>\n<pre class=\"lang:default decode:true \" >.box{\r\n  -webkit-animation: slidebox 5s ease alternate infinite;\r\n}\r\n@-webkit-keyframes slidebox{\r\n from{ -webkit-transform:translateX(0px); }\r\n to{ -webkit-transform:translateX(200px); }\r\n}<\/pre>\n<p><b>Without prefix<\/b><\/p>\n<pre class=\"lang:default decode:true \" >.box{\r\n  animation: slidebox 5s ease alternate infinite;\r\n}\r\n@keyframes slidebox{\r\n from{ transform:translateX(0px); }\r\n to{ transform:translateX(200px); }\r\n}<\/pre>\n<p><BR><BR> <\/p>\n<h4>Reasons to drop the -webkit prefix in CSS Animations<\/h4>\n<p>I no longer use the -webkit in CSS animations. With prefixed code, in order to create animations that work in &#8220;web view&#8221; (when a user clicks to view a web version), we&#8217;d need both the prefixed AND non-prefix versions because some users may be using Firefox to view the web version since Firefox does not support the -webkit prefix (it uses -moz). <\/p>\n<p>Without the non-prefixed code, Firefox users would be left wondering why people are raving about your nice design when shared on Twitter since they can&#8217;t see it.<\/p>\n<p>Adding both prefixed and non-prefixed CSS animation code can be a recipe for errors since you may forget to update one when making updates.<\/p>\n<p>Without prefixing, all current email clients and browsers will be able to render your animations. <\/p>\n<p>The exceptions would be iOS 8 and Android 4.4 and older clients. These clients would not run the animations but you probably don&#8217;t have these devices to test on anyways! You also avoid having to deal with the issues of older Android and iOS clients &#8211; for example the lack of support for certain animation properties such as &#8220;animation-fill-mode: forwards&#8221; which makes designing animations much simpler!<BR><BR><\/p>\n<h4>CSS Animation Support in Email<\/h4>\n<p><b>Email Clients that support CSS Animation<\/b><\/p>\n<table style=\"border:1px solid #555555;\">\n<tr>\n<td><b>Email client<\/b><\/td>\n<td><b>Animation selector<\/b><\/td>\n<\/tr>\n<tr>\n<td>iOS<\/td>\n<td>non-prefixed, -webkit<\/td>\n<\/tr>\n<tr>\n<td>Apple Mail<\/td>\n<td>non-prefixed, -webkit<\/td>\n<\/tr>\n<tr>\n<td>Outlook for Mac<\/td>\n<td>non-prefixed, -webkit<\/td>\n<\/tr>\n<tr>\n<td>Samsung Mail<\/td>\n<td>non-prefixed, -webkit<\/td>\n<\/tr>\n<tr>\n<td>Thunderbird<\/td>\n<td>non-prefixed, -moz<\/td>\n<\/tr>\n<tr>\n<td><BR><b>Browsers<\/b><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Safari<\/td>\n<td>non-prefixed, -webkit<\/td>\n<\/tr>\n<tr>\n<td>Chrome<\/td>\n<td>non-prefixed, -webkit<\/td>\n<\/tr>\n<tr>\n<td>Firefox<\/td>\n<td>non-prefixed, -moz<\/td>\n<\/tr>\n<tr>\n<td>Internet Explorer 11<\/td>\n<td>non-prefixed, -ms<\/td>\n<\/tr>\n<\/table>\n<h4>Other styles no longer requiring -webkit<\/h4>\n<p>Other CSS styles that no longer require a -webkit prefix include CSS transforms and filters (although filters are not supported by Internet Explorer 11).<\/p>\n<p><BR><BR><BR><br \/>\n<div style=\"padding:10px; border: 2px solid #99C731;background-color:#FFF8DC;border-radius:5px;\">\n<form action=\"https:\/\/freshinbox1.createsend.com\/t\/i\/s\/adrmi\/\" method=\"post\" id=\"subForm\">\n<span class=\"fisub_header\" style=\"font-weight:bold;\">Subscribe to the #EmailGeeks Newsletter<\/span>\n<p><input id=\"fieldEmail\" name=\"cm-adrmi-adrmi\" type=\"email\" style=\"width:90%\" required placeholder=\"Your Email Address\" \/><\/p>\n<p><button type=\"submit\">Subscribe<\/button><\/p>\n<\/form>\n<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Its 2018 and email clients that support CSS animations no longer require the -webkit vendor prefix when using the animation CSS property or @keyframes rule.<\/p>\n","protected":false},"author":2,"featured_media":2258,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[23,28,24,25,47],"tags":[],"_links":{"self":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/3805"}],"collection":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/comments?post=3805"}],"version-history":[{"count":16,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/3805\/revisions"}],"predecessor-version":[{"id":3824,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/3805\/revisions\/3824"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media\/2258"}],"wp:attachment":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media?parent=3805"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/categories?post=3805"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/tags?post=3805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}