Css3-webkit-transition (attribute gradient)

Transition (attribute gradient): "CSS transitions allow properties changes in CSS values to occur smoothly over a specified duration"

-webkit-transition:css Property (none|all| property) Duration Time function delay time

CSS Properties (transition-property): The properties to be changed, such as the width of the element is width, the text color to change this is COLOR;W3C gives a list of the properties can be transformed: In addition to the above attributes, there are CSS3 in the CSS3 distortion, such as zooming in and out, rotating oblique cut, gradient and so on. This value also has a strong "all" value, representing all the properties of the above table ;

Duration (transition-duration): The time of the animation execution, in seconds, such as 0.1 seconds can be written as "0.1s" or ". 1s", note that there is a "s" unit behind.

Time function (transition-timing-function):

Ease: Slowly, the function is equivalent to the Bezier curve (0.25, 0.1, 0.25, 1.0).

Linear: Linear over, function equivalent to Bezier curve (0.0, 0.0, 1.0, 1.0).

Ease-in: From slow to fast, the function equates to Bezier curves (0.42, 0, 1.0, 1.0).

Ease-out: From fast to slow, the function equates to Bezier curves (0, 0, 0.58, 1.0).

Ease-in-out: From slow to fast to slow, function equal to Bezier curve (0.42, 0, 0.58, 1.0)

Cubic-bezier: A specific cubic-bezier curve. (x1, y1, x2, y2) four values are specific to point P1 and Point P2 on a curve. All values must be in the [0, 1] area, otherwise invalid.

Delay Time (Transition-delay): How long to wait between the start of an action and the transformation, usually expressed in seconds (e.g.,. 1s). If you do not want to delay, the value can be omitted.

Css3-webkit-transition (attribute gradient)