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.

When kinetic email 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 this report 99% of Apple devices are now on iOS 9 and above.

Example:

With -webkit prefix

.box{
  -webkit-animation: slidebox 5s ease alternate infinite;
}
@-webkit-keyframes slidebox{
 from{ -webkit-transform:translateX(0px); }
 to{ -webkit-transform:translateX(200px); }
}

Without prefix

.box{
  animation: slidebox 5s ease alternate infinite;
}
@keyframes slidebox{
 from{ transform:translateX(0px); }
 to{ transform:translateX(200px); }
}

Reasons to drop the -webkit prefix in CSS Animations

I no longer use the -webkit in CSS animations. With prefixed code, in order to create animations that work in “web view” (when a user clicks to view a web version), we’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).

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’t see it.

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.

Without prefixing, all current email clients and browsers will be able to render your animations.

The exceptions would be iOS 8 and Android 4.4 and older clients. These clients would not run the animations but you probably don’t have these devices to test on anyways! You also avoid having to deal with the issues of older Android and iOS clients – for example the lack of support for certain animation properties such as “animation-fill-mode: forwards” which makes designing animations much simpler!

CSS Animation Support in Email

Email Clients that support CSS Animation

Other styles no longer requiring -webkit

Other CSS styles that no longer require a -webkit prefix include CSS transforms and filters (although filters are not supported by Internet Explorer 11).