HTML and CSS Reference
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
CSS3 transition properties
Specifies the property to which a transition will be applied
Specifies how much time the transition should take from start to finish
Specifies how long to wait from the time the property is changed before starting
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.
Values for transition-timing-function
The default value that applies the effect in such a way that it starts slow, speeds up,
then ends slow.
Makes the transition constant from start to finish
Causes the transition to have a slow start.
Causes the transition to have a slow finish.
Causes the transition to have a slow start and a slow finish.
Allows you to define values. This takes four parameters that are values from 0 and 1.