-ms-animation should I include this for older brow

Question

As the title states I was wondering if this should be used.

According to MS documentation simply using "animation" is now the default for IE10 (which is why i had a green squiggle)

After looking this up and fixing it, I wondered, should I still include this line "-ms-animation"

Can anyone say if it is needed for older browsers, or did removing the need for an "-ms" prefix apply retroactively?

Answer 1

The -ms- prefix was required for animations, transitions, gradients and font-feature-settings in pre-release versions of Internet Explorer 10. The Release Preview and stable version of IE10 support all of the aforementioned features unprefixed (as do IE11 and Microsoft Edge, needless to say).¹

Even if you somehow got hold of a pre-release build of IE10, it's not even going to run anymore because all pre-release builds expired within a year after their release.²

So -ms- is no longer needed for animations, transitions, gradients and font-feature-settings, because no version of any Microsoft browser in existence requires the prefix anymore. You are just needlessly increasing file size and wasting bandwidth by including the prefix for those features.

While we're at it, it's an equally unnecessary waste of bandwidth to include -ms-transform in any animation or transition styles, because the only version of IE that requires the -ms- prefix for transforms is IE9, which doesn't support animations or transitions anyway.

---

¹ _{Ironically, thanks to IE's historically long development cycle, Microsoft is the only vendor to have followed the process of prefixing experimental features faithfully from start to finish: prefixing in unstable builds, and shipping to production unprefixed, reserving public-facing prefixes only for vendor-specific features.}

² _{If you think "a year" sounds like a long time, here's a bit of perspective for you: the first Platform Previews of IE10 were distributed in 2011 — six years ago. That's even longer than the gap between IE6 and IE7 (just five years)!}

Answer 2

The short version:

should I still include this line "-ms-animation"

If you want to support that features on old browsers: Yes.

You shouldn't use experimental features in the wild in the first place. They are experimental. This is why most browsers are moving away from prefix properties and using configuration flags instead.

---

A CSS feature prefix means that the property or value is experimental or non-standard.

When the feature is no longer experimental or non-standard, a new version of the browser will be released with unprefixed support for the feature.

Old versions of the browser don't suddenly acquire the code from the new version of the browser. If someone continues to use Joes' Webby 6, and the standard version of the feature isn't supported until Joes' Webby 7, then people who don't upgrade to version 7 won't get support for the features (including the standardised version of the CSS feature).

Happily, for the last several years, browsers have auto-updated to the latest version for most users. (There are some exceptions, such as the ability to pin a specific version of IE for a Windows network, or Debian's policy of managing upgrades only through their package management system and being very conservative about new releases), but for the most part, you don't need to worry about supporting old versions of browsers — especially for the cosmetic stuff that most prefixed CSS covers.

For that matter, using experimental, non-standard features in the wild has never been a great idea in the first place.

Answer 3

All you need is:

 -webkit-animation: myanim 5s infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: myanim 5s infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

You can always check http://css3please.com/ for css3 related stuff in future :)