The transition effect

Multiple property changes
To add a transitional effect for more than one style, add more properties separated
by commas. This can be done as follows:

{transition: width 2s, height 2s, transform 2s;}

The CSS3 transition properties
The transition has the following four properties:
• transition-property
• transition-duration
• transition-timing-function
• transition-delay
You can specify all the properties, one on each line, as follows:

div {
	transition-property: opacity;
	transition-duration: 1s;
	transition-timing-function: linear;
	transition-delay: 2s;
	/* Safari */
	-webkit-transition-property: opacity;
	-webkit-transition-duration:1s;
	-webkit-transition-timing-function:linear;
	-webkit-transition-delay:2s;
	/* Mozilla */
	-moz-transition-property: opacity;
	-moz-transition-duration:1s;
	-moz-transition-timing-function:linear;
	-moz-transition-delay:2s;
}

Alternatively, you can specify all the properties in a single-line declaration using the shorthand transition property in the following way:

div {
	transition: opacity 1s linear 2s;
}