CSS Master

Figure 5.4. The effect of a negative transition delay

Negativevaluesarevalidfortransition-delay,though.Positivetransition-delay
valuesshiftthestartoftheanimationbythespecifiedamountoftime.Negative
values,however,offsetthebeginningofthetransition,asseeninFigure5.4.Using
transition-duration: 2s; transition-delay: -1swillcausethetransitionto
jumponesecondintotheplaycyclebeforecontinuing.Usinganegativetransition-
delayvaluecancreateasnappiertransitionexperiencebyshorteningitsperceived
duration.

Timing Functions

Wecanalsoshapetransitioneffectsusingthetransition-timing-function
property.Timingfunctionsareformulaeofsortsthatdeterminehowthein-between
valuesofatransitionarecalculated.Whichtimingfunctionyouusewilldepend
onwhatkindoftransitioneffectyou’dliketoachieve:asteppedtransitionora
smoothgradualone.

Transitions and Animation 199