body {
background: red;
transition: 500ms 1s background linear;
}Usingthetransitionpropertyisthemostconcisewaytodefineatransition;
however,theremaybecasesinwhichyouwanttodefineaglobaltransitioneffect
(forexample,transition: 500ms ease)inonepartofyourCSS,andlimititto
specificCSSproperties(forexample,transition-property: color)inanother.
Thisiswherethelonghandpropertiesareuseful.Transition Durations and Delays
Thetransition-durationpropertysetsthedurationofthetransition,orhowlong
itwilltaketocomplete.Thetransition-delaypropertydetermineshowmuch
timeshouldlapsebeforethetransitionbegins.Bothpropertiesaccepttimeunitsas
avalue.Thesecanbesecondsormilliseconds;1s,2.5s,and200msareallvalid
values.Bothtransition-durationandtransition-delayhaveaninitialvalueof0s,or
zeroseconds.Fortransition-duration,thismeanstherewillbenogradual
transitionbetweenthestartandendstates.Fortransition-delay,thismeansthe
transitionwilloccurimmediately.Withtransition-duration,youmustusevaluesgreaterthanzero,suchas.5sor
2500ms.Negativevalueswillbetreatedlikeavalueof0s,andthetransitionwill
failtoexecute,asillustratedinFigure5.4.198 CSS Master