CSS Master

var transitionendHandler = function(eventObject) {

$(eventObject.target).attr('hidden', '');

$('#thanks').removeAttr('hidden');

};

$(document).on('transitionend', transitionendHandler);

Herewe’reusingjQuery’smethodstoaddahiddenattributetoeachlistitem,and

toremoveitfrom#thanks.

Multiple Transitions and transitionend Events

Compoundtransitions—thatis,atransitionofmultipleproperties—triggermultiple

transitionendevents.Atransitionsuchastransition: left 4s cubic-linear,

background 2s 500ms;willtriggertwotransitionendevents:onefortheleft

propertyandanotherforbackground.Todeterminewhichtransitiontriggeredthe

event,youcancheckthepropertyNamepropertyoftheeventobject:

var transitionendHandler = function(eventObject) {

if( eventObject.propertyName === 'opacity' ){

// Do something based on this value.

}

};

Occasionally,atransitionwillfailtocomplete.Thiscantypicallyhappenwhen

thepropertyisoverriddenwhileit’sinprogress—perhapsauseractionremoves

theclassname.Inthosesituations,thetransitionendeventwon’tfire.

Becauseofthisrisk,avoidusingthetransitionendeventtotriggeranything

“missioncritical,”suchasaformsubmission.

CSS Animation

ThinkofCSSanimationasthemoresophisticatedsistertoCSStransitions.Anima-

tionsdifferfromtransformsinafewkeyways:

■ Animationsdonotdegradegracefully.Ifthere’snosupportfromthebrowser,

theuserisoutofluck.ThealternativeistouseJavaScript.

■ Animationscanrepeat,andrepeatinfinitely.Transitionsarealwaysfinite.

208 CSS Master