Use CSS3 in applications - Programming in HTML5 with JavaScript and CSS3 - page 290

With this CSS code in place, when the user moves the mouse over the div element, it will
move to the right and its background color will change to white. Since the background of
the webpage is also white, it provides the effect of disappearing. You need to understand
what properties are being used to achieve this effect. In this particular code, you are using
a shorthand property called transition that allows you to specify a comma-separated list
of CSS properties and a length of time for the transition of the specified property to take
place. These properties could also be indicated separately using the various CSS properties in
Table 4-9.

TABLE 4-9

CSS3 transition properties

Property Name Description

Specifies the property to which a transition will be applied

transition-property

Specifies how much time the transition should take from start to finish transition-duration

Specifies how long to wait from the time the property is changed before starting
the transition

transition-delay

EXAM TIP
When using the individual transition-* properties, you can specify only one property to
transition. With the transition shorthand, you are able to specify a comma-separated list.

Another property that exists to control the speed of the transitions is transition-timing-
function . This property allows you to have a bit more control over the speed of the transition.
With the transition-timing-function property, you can specify some different effects to the
timing of the transition. The possible values are specified in Table 4-10.

TABLE 4-10

Values for transition-timing-function

Value Description

The default value that applies the effect in such a way that it starts slow, speeds up,
then ends slow.

ease

Makes the transition constant from start to finish linear

Causes the transition to have a slow start.

ease-in

Causes the transition to have a slow finish.

ease-out

Causes the transition to have a slow start and a slow finish.

ease-in-out

Allows you to define values. This takes four parameters that are values from 0 and 1. cubic-bezier