CSS Master

■ Animationsusekeyframes,whichoffertheabilitytocreatemorecomplexeffects.

■ Animationscanbepausedinthemiddleoftheplaycycle.

ThelatestversionsofallmajorbrowserssupportCSSanimation,proxybrowsers
excepted.VersionsofSafaripriorto9,versionsofChromepriorto43,andUC
Browserversionsuptoandincluding 9 requirea-webkit-prefix.SeeTable5.4for
moreinformation.

Table 5.4. Browser support for CSS animation (Source: CanIUse.com^17 )

Internet Opera Safari Android UC Browser

Explorer

Chrome Firefox

9+ (requires

-webkit-

prefix)

2.1 (versions

4.3 require

-webkit-

prefix, 4.3

has partial

support )

4+ (versions

9.0 require

-webkit-

prefix)

12.1+

(versions

15 require

-webkit-

prefix)

5+ (versions 1 0+

15 require

-moz-

prefix)

4+ (versions

43 require

-webkit-

prefix)

Firefoxversions 15 andearlierrequirea-moz-prefix;laterversionsdonot.Internet
Explorer10+alsosupportsanimationswithoutaprefix.EarlierversionsofIEdo
notsupportanimationsatall.

WecancheckforCSSanimationssupportinafewways.Thefirstisbytestingfor
thepresenceofCSSKeyframeRuleasamethodofthewindowobject:

var hasAnimations = 'CSSKeyframeRule' in window;

[email protected]()API(discussedin
Chapter 6 ),wecanusethatinstead:

(^17) http://caniuse.com/#feat=css-animation
Transitions and Animation 209