How to use transition animation in CSS3

We know that there is a transition attribute in the CSS3, it can let the animation in the CSS level implementation, is not the use of setinterval (), not the timer, but the bottom C + + in the rendering, so that the quality of rendering animation, silky degree is much better than JS, JQuery. Let's take a look at how this transition property is used today.

To subvert our traditional production of Web animation thinking mode, now the mobile phone page, there is absolutely no animation is setinterval () completed, and is the transition to achieve.

Syntax: Transition:property duration timing-function delay, the unit of time is: seconds (s).

TRANSITION-PROPERTY Specifies the name,transition effect of a CSS property none of the properties will get a transition effect.

All properties will have a transition effect.

The property defines a list of CSS attribute names that apply the transition effect, separated by commas.

The transition-duration transition effect requires a specified number of seconds or milliseconds to complete the amount of time (in seconds or milliseconds) that is required to complete the transition effect.

The default value is 0, which means there is no effect.

Transition-timing-function

Specifies the speed curve of the transition effect

Linear transitions (equal to Cubic-bezier (0,0,1,1)) that start at the same speed to the end.

Ease starts slowly, then gets faster, and then ends with a slow transition effect (Cubic-bezier (0.25,0.1,0.25,1)).

Ease-in the transition effect at a slow start (equals Cubic-bezier (0.42,0,1,1)).

Ease-out the transition effect at a slow end (equal to Cubic-bezier (0,0,0.58,1)).

Ease-in-out the transition effect at a slow start and end (equals Cubic-bezier (0.42,0,0.58,1)).

Cubic-bezier (n,n,n,n) defines its own value in the Cubic-bezier function. The possible values are numbers between 0 and 1.

Transition-delay defines the start of the transition effect by specifying the number of seconds or milliseconds to wait for the transition effect to start

What attributes can participate in transitions

Almost all CSS properties can be transitioned.

JQuery transition

Background-color

Background-position

Background-image

Any deformed transform can transition.

Trigger conditions for Transition animations

Any change to CSS will trigger a transition. For example: hover, add and subtract classes, simply set CSS directly.

document.getElementById ("box"). Style.width = "300px";

Changes to the class name can cause transitions to be animated:

document.getElementById ("box"). ClassName = "Long";

Special Note: transition cannot inherit.

About the use of the transition attribute so much more, please pay attention to the other related articles in PHP Chinese web!

Related reading:

What are the new background properties of CSS3

How to use CSS3 media query

How to make a CSS3 elastic box