CSS3 过渡效果

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

Understanding CSS3 Transitions

Usually, 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 when the mouse hovers over it. Normally, when the cursor is placed on the button, the background color of the button changes immediately from the old property value to the new property value.

CSS3 introduces 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-colorAnimation on HTML button on mouse 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 propertiesThey are optional because their default values will not prevent the transition from occurring.

Executing multiple transitions

Each transition property can take multiple values, separated by commas, which provides a simple way to define multiple transitions with different settings at once.

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 properties

When applying transitions, many properties must be considered. However, all transition properties can also be specified in a single property to shorten the code.

过渡属性是一种简写属性，用于按列出的顺序一次设置所有单个过渡属性（即缩写属性transition-property，transition-duration，transition-timing-function和transition-delay在所列出的顺序）。

使用此属性时，请务必对值遵循此顺序。

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

CSS3过渡属性

下表简要概述了所有过渡属性：