CSS Master

Figure 5.3. Creating a transition triggered by JavaScript

Intheexamplesmentioned,we’veusedthetransitionshorthandproperty.It’sa

condensedwayofspecifyingfour“longhand”properties,whicharelistedin

Table5.2.

Table 5.2. CSS transition properties

Property Description Initial value

transition-duration How long the transition should last 0s (no transition)

all (all animatable

properties)

transition-property Which property to transition

How to calculate the values between ease

the start and end values

transition-timing-function

How long the browser should wait 0s (no delay)

between changing the property and

starting the transition

transition-delay

Eachlonghandpropertyhasaninitialvalue.It’sadefaultvaluethatthebrowser

willuseunlessthepropertyisexplicitlyset.Forexample,theinitialvalueof

196 CSS Master