Deep understanding of CSS transitions Transition

The transition attribute may seem simple, but in fact it has a lot of attention to detail and easy to confuse. This article records your views and some of the information collected.

Then we'll start straight.

Early in the web to achieve animation effect, are dependent on JavaScript or flash to complete. However, a new module transition has been added to the CSS3, which can be used to trigger the appearance change of elements through some simple CSS events, making the effect appear more delicate.

Simply put, it is triggered by clicking on the mouse, getting focus, being clicked or any changes to the element, and smoothing the CSS's property values with an animated effect.

　　Creating a simple transition effect in CSS can be accomplished in the following few steps:

First, declare the initial state style of the element in the default style;

Second, declare the transition element final state style, such as the suspended state;

　　　　Third, add some different styles by adding a transition function in the default style.

　　

CSS3 's over-transition property is a composite property that mainly includes the following sub-properties:

• • Transition-property: Specify CSS properties for staging or dynamic impersonation (default = ALL)

  • Transition-duration: Specifies the time required to complete the transition (default is 0s)

  • Transition-timing-function: Specify the Transition function (the default is the ease function)

  • Transition-delay: Specifies the delay time at which the start occurs (the default value is 0s)

Note Ie9-does not support this property, Safari3.1-6, ios3.2-6.1, android2.1-4.3 need to add a-webkit-prefix, while the remaining high-version browsers support standard notation

Deep understanding of CSS transitions Transition