CSS3 Transition effects

CSS3The transition feature allows the change of CSS property values to occur smoothly over the specified duration.

Understand CSS3Transition

Normally, when the value of a CSS property changes, the rendering result is updated immediately. A common example is changing the background color of a button on hover. In normal circumstances, when the cursor is placed on the button, the background color of the button will immediately change from the old property value to the new property value.

CSS3introduced a new transition feature that allows you to smoothly animate properties from old values to new values over time.

The following examples will show you howbackground-colorAnimate the HTML button on hover.

button　{
　　　　background:　#fd7c2a;
　　　　/*　For　Safari　3.0+　*/
　　　　-webkit-transition-property: background;
　　　　-webkit-transition-duration:　2s;
　　　　
　　　　transition-property: background;
　　　　transition-duration:　2s;
}
button:hover　{
　　　　background:　#3cc16e;
}

You must specify at least two properties transition-property and transition-duration (greater than 0) to make them produce a transition effect. However, all otherTransition Propertiesare optional because their default values will not prevent the transition from occurring.

Perform multiple transitions

Each transition property can take multiple values, separated by commas, which provides an easy way to define multiple transitions with different settings in one go.

button　{
　　　　background:　#fd7c2a;
　　　　border:　3px solid #dc5801;
　　　　/*　For　Safari　3.0+　*/
　　　　-webkit-transition-property: background, border;
　　　　-webkit-transition-duration:　1s,　2s;
　　　　
　　　　transition-property: background, border;
　　　　transition-duration:　1s,　2s;
}
button:hover　{
　　　　background:　#3cc16e;
　　　　border-color:　#288049;
}

Transition Shorthand Property

Many properties need to be considered when applying transitions. However, all transition properties can also be specified in one property to shorten the code.

Transition properties are a shorthand property used to set all individual transition properties (i.e., the shorthand property transition) in the order listed at once.-property, transition-duration, transition-timing-function and transition-delay in the order listed).

When using this property, be sure to follow this order of values.

button　{
　　　　background:　#fd7c2a;
　　　　-webkit-transition:　background　2s　ease-in　0s;　/*　For　Safari　3.0+　*/
　　　　transition:　background　2s　ease-in　0s;　
}
button:hover　{
　　　　background:　#3cc16e;
}

CSS3Transition Properties

The following table briefly summarizes all transition properties: