CSS Master

var hasAnimations = CSS.supports('animation-duration','2s');^18

TheotheroptionistousetheModernizrJavaScriptlibrary^19 anditsModern-

izr.cssanimationsproperty.

Creating Your First Animation

[email protected]@keyframes

rulehastwopurposes:

■ setsthenameofouranimation

■ groupsourkeyframerules

Let’screateananimationnamedpulse:

@keyframes pulse {

}

Ourkeyframeswillbedefinedwithinthisblock.Inanimation,akeyframeisapoint

atwhichtheactionchanges.WithCSSanimationsspecifically,keyframerulesare

usedtosetpropertyvaluesatparticularpointsintheanimationcycle.Valuesthat

fallbetweenthevaluesinakeyframeruleareinterpolated.

Attheminimumwerequiretwokeyframes:afromkeyframe,whichisthestarting

stateforouranimationandatoframe,whichisitsendstate.Withineachindividual

keyframeblock,wecandefinewhichpropertiestoanimate:

css/chapter5/animsimple.css (excerpt)

@keyframes pulse {

from {

transform: scale(0.5);

opacity: .8;

}

to {

(^18) InolderversionsofWebKit/Blink-basedbrowsers,thisneedstobeCSS.supports('-webkit-
animation-duration','2s');
(^19) http://modernizr.com/
210 CSS Master