The transition of CSS3

Objective

Transitions (transition) can add effects when an element changes from one style to another without the use of flash and JS

"Browser support"

IE10, Firefox, Chrome, opera support transition properties

Safari requires a prefix-webkit-

IE9 and previous versions do not support transition

Usage

1. Specify the elements of the transition binding CSS Properties

2. Duration of the specified effect

Div {transition: width 2s; -moz-transition: width 2s;    /*  */-webkit-transition: width 2s;    /*  */-o-transition: width 2s;    /* */}

If the duration is not specified, the default is 0, there is no transition effect

If you want to add a transition effect to multiple styles, add multiple attributes, separated by commas

"Transition Properties"

1.transition-property-CSS Property name that specifies the transition to apply

2.transition-duration-Specifies the time that the transition takes, the default is 0

3.transition-timing-function-Specifies the time curve for the transition effect, which defaults to "ease"

4.transition-delay-Specify how long the transition effect starts

The transition of CSS3