Transition attribute in CSS3 (Bezier curve)

Transition syntax:

1Transition: [<' Transition-property'>||<' Transition-duration'> ||2 <' Transition-timing-function'>||<' Transition-delay'>[, [<' Transition-property'> ||3 <' Transition-duration'>||<' Transition-timing-function'>||<' Transition-delay'>]]*

Transition consists of four property values: The properties of the transformation: Transition-property; the time of the transformation continuation: transition-duration; During the duration of the continuation period, The rate change of the transformation transition-timing-function; the transformation delay time transition-delay. Here are the four attribute values, respectively:

First, Transition-property:

Grammar:

1 < IDENT > < IDENT > ] *

Transition-property is used to specify that when one of the attributes of an element is changed, the transition effect is performed, which has the following values: None (no property changes); All (change all properties) This is also its default value; Indent (element property name) When the value is none, transition stops execution immediately, and when specified as all, the element will perform a transition effect when any property value changes occur, ident is a property value that can be specified for the element. The corresponding types are as follows:

1, color: Through the red, green, blue and Transparency component transformation (each value is processed separately), such as: Background-color,border-color,color,outline-color CSS properties;

2, Length: real numbers, such as: Word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin, Min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing, Background-position and other attributes;

3, percentage: real numbers, such as: Word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width, Max-height,line-height,height,background-position and other attributes;

4, Integer discrete steps (the entire number), in the real digital space, and the use of floor () to convert to an integer, such as: Outline-offset,z-index properties;

5, Number True (floating point type) value, such as: Zoom,opacity,font-weight and other properties;

6. Transform list: For more information, please refer to: "CSS3 transform".

7, Rectangle: by x, y, Width and height (converted to numerical) transformation, such as: crop;

8, Visibility: discrete step, within the range of 0 to 1 digits, 0 means "hidden", 1 means full "display", such as: visibility;

9, Shadow: Action on color, x, Y, and blur (fuzzy) attributes, such as: Text-shadow;

10. Gradient: Change the position and color of each stop. They must have the same type (radial or linear) and the same stop value in order to perform the animation, such as: background-image;

11. Paint Server (SVG): supports only the following: from gradient to gradient and from color to color, and then works like above;

12. space-separated List of above: If the list has the same item value, each item in the list changes according to the above rules, otherwise there is no change;

13, a shorthand property: If all parts of the abbreviation can be animated, it will change as if all the individual attributes change.

Specifically what CSS properties can achieve transition effect, in the Web site list all can achieve transition effect of CSS property value and value of the type, you can click here to learn more. One thing to be reminded here is that not all attribute changes are triggered by the transition action effect, such as the adaptive width of the page, which does not trigger the transition effect when the browser changes width. However, the change in the property type shown in the table above will trigger a transition action effect.

Second, Transition-duration:

Grammar:

1 <  Time > <  Time >] *

Transition-duration is used to specify the duration of the element conversion process, the value:<time> is the number, in S (seconds), can be used for all elements, including: Before and: after pseudo-elements. The default value is 0, which means that the transformation is instantaneous.

Third, Transition-timing-function:

Grammar:

1 transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out |2Cubic-bezier (< Number>,< Number>,< Number>,< Number>) [, ease | linear | ease-in |3Ease-out | Ease-in-out | Cubic-bezier (< Number>,< Number>,< Number>,< Number>)]*

The value of transition-timing-function allows you to change the conversion rate of a property value based on the time of the push, Transition-timing-function has 6 possible values:

1. Ease: (gradually slows down) the default value, ease function is equivalent to Bezier curve (0.25, 0.1, 0.25, 1.0);

2, Linear: (constant speed), the linear function is equivalent to the Bezier curve (0.0, 0.0, 1.0, 1.0);

3, Ease-in: (acceleration), the Ease-in function is equivalent to the Bezier curve (0.42, 0, 1.0, 1.0);

4, Ease-out: (deceleration), the Ease-out function is equivalent to the Bezier curve (0, 0, 0.58, 1.0);

5, Ease-in-out: (Acceleration and deceleration), the Ease-in-out function is equivalent to the Bezier curve (0.42, 0, 0.58, 1.0);

6, Cubic-bezier: (this value allows you to customize a time curve), 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.

It is cubic-bezier to calculate the value of the attribute in the "transform" process through the Bezier curve, as shown in the following curve, by altering the coordinates of the P1 (x1, y1) and P2 (x2, y2) to change the output Percentage of the entire process. The initial default value is defaults.

A few other properties:

Four, Transition-delay:

Grammar:

1 <  Time > <  Time > <  Time > <  Time >] *

Transition-delay is used to specify the time at which an animation starts executing, that is, how long it takes to start the transition effect after changing the attribute value of the element, and the value:<time> is the number, in S (seconds), Its use is extremely similar to transition-duration and can be used for all elements, including: Before and: after pseudo-elements. The default size is "0″, that is, the transform is executed immediately, with no delay."

Sometimes we don't just change the properties of a CSS effect, we want to change the transition effect of two or more CSS properties, so we just string together a few transition declarations, separated by commas (","), Then each can have their own different duration and the rate of their time transformation. But it should be noted that the values of both Transition-delay and transition-duration are time, so to differentiate their position in ligatures, the General browser will decide according to the order of precedence, the first 怭 value that can be resolved to a time is Transition-duration the second one is Transition-delay. such as:

1{2-moz-transition: background 0.5s ease-in,color 0.3s ease-out;  3-webkit-transition: background 0.5s ease-in,color 0.3s ease-out; 4 -o-transition: background 0.5s ease-in,color 0.3s ease-out; 5 transition: background 0.5s ease-in,color 0.3s ease-out; }6}

If you want to perform all the properties of the transition effect on the element, then we can also use the all property value to operate, at which time they share the same duration and rate transformation, such as:

1  {2-moz-transition: All 0.5s ease-in; 3 -webkit-transition: All 0.5s ease-in; 4 -o-transition: All 0.5s ease-in; 5 transition: All 0.5s ease-in; 6 }

To synthesize the above we can give transition a shorthand method: Transition: <property> <duration> <animation type> <delay> as shown:

Word Comment: Selected property: The selected attribute (all is all can also set the background individually: background width: widths, etc.) animation delay: Animation delay

A sample code that corresponds to:

1{2-webkit-transition: All . 5s ease-in-out 1s;  3-o-transition: All . 5s ease-in-out 1s; 4 -moz-transition: All . 5s ease-in-out 1s; 5 transition: All . 5s ease-in-out 1s; 6 }

Original address: Http://www.w3cplus.com/content/css3-transition

Transition attribute in CSS3 (Bezier curve)