transition-propertyisall(allproperties),andtheinitialvalueoftransition-
timing-functionisease.Whenwesetatransitionduration—whetherusingthe
transitionortransition-durationproperty—thosevaluesfortransition-
propertyandtransition-timing-functionareimplied.Thisiswhywecanget
awaywithsettingthetransitionpropertyandnothingelse.
Using the transition Property
Aswe’vealreadyseeninthepreviousexamples,timeunitsareoneacceptablevalue
forthetransitionproperty.TheCSSValuesandUnitsModuleLevel 3 specifica-
tion^11 definestwokindsoftimeunitsforusewithtransitionsandanimations:sfor
seconds,andmsformilliseconds.Wecanalsocollapsevaluesfortransition-
timing-function,transition-delay,andtransition-propertyintothisshorthand
transitionproperty:
body {
background: red;
transition: background 500ms linear 1s;
}Herewe’vetoldthebrowsertotransitionthebackgroundproperty.Theduration
willlast 500 milliseconds(whichwecouldalsowriteas.5s).Itwillusethelinear
timingfunction(discussedlaterinthischapter),andthestartofthetransitionwill
bedelayedby 1 second.It’sacompactversionofthefollowingCSS:
body {
background: red;
transition–property: background;
transition–duration: 500ms;
transition–timing–function: linear;
transition–delay: 1s;
}Ordermatterssomewhatwhenusingthetransitionshorthandproperty.Thefirst
valuethatcanbeinterpretedasatimewillbecomethetransitiondurationnomatter
whereitsitsinthevaluestring.Thesecondtimevaluewilldeterminethetransition
delay.Inotherwords,wecouldreorderthevaluesinourtransitionpropertylike
so:
(^11) http://www.w3.org/TR/css3-values/
Transitions and Animation 197