Transitioning Multiple Properties
It’spossibletotransitionmultiplepropertiesofasingleelementusingatransition
list.Let’slookatanexample:
div {
background: #E91E63;
height: 200px;
width: 200px;
margin: 10px 0;
position: relative;
left: 0;
top: 3em;
transition: left 4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
background 2s 500ms;
}.transthem {
left: 30%;
background: #00BCD4;
}Here,we’vedefinedtransitionsfortheleftandbackgroundproperties.Thediffer-
enceisthateachitemisseparatedbyacomma.Thelefttransitionwilllastfour
secondsanduseacubic-beziertimingfunction.Thebackgroundtransitionwill
onlylasttwoseconds,butitwillbeginafterahalf-second(500ms)delay.
Occasionally,youmayneedtodetectwhenatransitionendsinordertotakeanother
action.Forexample,ifyoutransitiontheopacity: 1toopacity: 0,it’sagood
ideatoaddahiddenattributetotheelementforimprovedassistivetechnology
support.Thisiswherethetransitionendeventcomesinhandy.^14
Whenatransitioncompletes,thebrowserfiresatransitionendeventontheaffected
element—oneforeachproperty.^15 WecanlistenfortheseeventsusingaddEventL-
istener:
(^14) InolderversionsofChrome(<26)andSafari(<6),thiseventisprefixedwebkitTransitionEnd.
InolderversionsofOpera,itisoTransitionEnd(10.5)orotransitionend(12).Otherbrowsers
andversionsusenoprefix.
(^15) Thereisnocorrespondingtransitionstartevent;nordoesHTMLdefineanontransitionend
eventattribute.
Transitions and Animation 203