About CSS3 using the Transition property for transition effects

The new transform attribute in CSS3 can realize the transition effect of the element in the transformation process, and realizes the basic animation. Following this article to introduce the CSS3 use the transition attribute to achieve the transition effect, the need for friends to refer to this article

Attribute details

The purpose of the transition property is to have some properties of CSS (such as background) appear with a smooth transition effect. It is a merge attribute that is composed of the following four attributes:

• Transition-property: Sets CSS properties that apply transitions, such as background.

• Transition-duration: Sets the time that the transition effect takes. The default is 0.

• Transition-timing-function: Sets the time curve for the transition effect. The default is "ease".

• Transition-delay: Specifies when the transition effect begins. The default is 0.

Example:

button{    transition:background 1s;    -webkit-transition:background 1s; /* Safari */}

When defining the Transition property, Transition-property and transition-duration are required, and the other two are optional.

Transition-property and Transition-duration

The transition-property is used to specify the CSS properties that apply the transition effect, including (perhaps not all):

• Width

• Height

• Color

• Background (color, image, position)

• Transform (in the next post)

• Border (color, width)

• Position (top, bottom, left, right)

• Text (size, weight, shadow, word-spacing)

• Margin

• Padding

• Opacity

• Visibility

• Z-index

• All

The Transition-duration property is used to set the transition effect for a specified property, either seconds (s) or milliseconds (ms).

Transition-delay and Transition-timing-function

The transition-delay is used to set the start time of the transition effect, which defaults to 0, which can be seconds (s) or milliseconds (ms). If Transition-delay is a negative number, the transition effect starts early.

The transition-timing-function is used to set the effect of transitions, which include:

• Ease-start slow, middle fast, end slow

• Ease-in-Fade in effect, slow-in and fast-out

• Ease-out-Fade out effect, fast into slow out.

• Ease-in-out-Start slow and end slow

• Cubic-bezier (N,n,n,n)-defines its own value in the Cubic-bezier function. The possible value is a number from 0 to 1

Example:

button{   transition:background 1s ease-in-out 2s;   -webkit-transition:background 1s ease-in-out 2s; /* Safari */}

Multi-attribute

For multiple properties, the effects of each property are separated by commas:

  button{     transition:background 1s ease-in-out 2s, width 2s linear;     -webkit-transition:background 1s ease-in-out 2s, width 2s linear; /* Safari */   }

Compatibility

Internet Explorer 10, Firefox, Opera, and Chrome support the transition properties.

Safari supports an alternative-webkit-transition property.

Internet Explorer 9 and earlier browsers do not support the transition property.

Trigger

It is important to note that the transition effect is a property that needs to be defined before the transition effect is applied by triggering, such as: hover, focus, and:active, etc.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!