CSS3 transition to implement transition effects sample

Browser support:

Internet Explorer version 10 and above, Firefox, Chrome, and Opera support the transition properties. Safari needs to prefix-webkit-. Internet Explorer 9 and earlier versions do not support the transition property. Chrome 25 and earlier versions require a prefix of-webkit-.

Syntax:

The Transition property consists primarily of four property values: Transition-property--the name of the CSS property that applies the transition; transition-duration--Defines the time that the transition effect takes, by default 0;transition-timing-function--a time curve that sets the transition effect. The default is "ease"; transition-delay--Specify when the transition effect starts, and the default is 0. Transition--shorthand property, which is used to set four transition properties in a property. If you want to add a transition effect to multiple styles, add multiple properties, separated by commas.

The transition property is a shorthand property that is used to set four transition properties :

Transition:property duration timing-function delay;
Transition-property
Transition-duration
Transition-timing-function
Transition-delay

Value Description

Transition-property Specify the name of the CSS property that sets the transition effect.
Transition-duration specify how many seconds or milliseconds to complete the transition effect.
Transition-timing-function the speed curve of the specified speed effect.
Transition-delay defines when the transition effect begins.

Transition-property is used to specify that a transition effect is performed when one of the elements of an element changes, mainly with the following values:

None (no property change);

All (changes to all attributes) This is also its default value;

Indent (element attribute name);

When the value is none, transition immediately stops execution, and when all is specified, the element will perform a transition effect when any property value changes occur, ident can specify one of the element's property values.

Its corresponding type is as follows:

1, color: Through the red, green, blue and Transparency component transformation (each value separately processing), 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, the integer discrete steps (the entire number), in the real digital space, as well as the use of floor () converted to integers, such as: Outline-offset,z-index properties;

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

6, Transform list: Details please refer to: "CSS3 transform".

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

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

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

10, gradient: Through each stop when the position and color change. They must have the same type (radial or linear) and the same stop number to perform the animation, such as: background-image;

11, Paint Server (SVG): only support the following: from gradient to gradient and color to color, and then work similar to the above;

12, space-separated List of above: If the list has the same item value, then 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 like all individual properties.

One caveat here is that not all attribute changes are triggered transition action effects, such as the adaptive width of the page, when the browser changes width, does not trigger the transition effect. However, the property type changes shown in the above table will trigger a transition action effect.

Second, Transition-duration:

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

Third, Transition-timing-function:

Transition-timing-function:ease | Linear | ease-in | Ease-out | Ease-in-out |

Cubic-bezier (<NUMBER>, <number>, <number> <number>) [, ease | linear | ease-in |

Ease-out | Ease-in-out | Cubic-bezier (<NUMBER>, <number>, <number>, <number>)]*

Take value:

The value of transition-timing-function allows you to change the conversion rate of the attribute value according to the advance of time, Transition-timing-function has 6 possible values:

1, Ease: (gradually slow) default value, Ease function is equivalent to Bezier curve (0.25, 0.1, 0.25, 1.0);

2, Linear: (uniform), 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 the point P1 and Point P2 on the curve. All values need to be in the [0, 1] area, otherwise it is not valid.

It is cubic-bezier to calculate the attribute value in the process of "conversion" through the Bezier curve, as shown in the following curve, by changing the coordinates of the P1 (x1, y1) and P2 (X2 and y2), the output percentage of the whole process can be changed. The initial default value is defaults.

Schematic diagram of several other properties:

Four, Transition-delay:

Transition-duration: <time> [, <time>]*transition-delay: <time> [, <time>]*
Transition-delay is used to specify the time at which an animation begins to execute, that is, how long it takes to perform a transition effect after changing the value of an element's property, taking a value of:<time> as a number, in S (seconds), It is very similar to transition-duration and can be used for all elements, including: Before and: after pseudo elements. The default size is "0″, which means that the transform executes immediately, without delay."

Sometimes we don't just change the attributes 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 statements, separated by commas (","), Then each can have their own different duration and the rate of their time conversion mode. But it needs to be noted that the value of Transition-delay and transition-duration is time, so to distinguish their position in ligatures, the General browser will decide according to the order, the first can be resolved to time? The P value is transition-duration and the second is transition-delay. Such as:

A

-moz-transition:background 0.5s ease-in,color 0.3s ease-out;

-webkit-transition:background 0.5s ease-in,color 0.3s ease-out;

-o-transition:background 0.5s ease-in,color 0.3s ease-out;

Transition:background 0.5s ease-in,color 0.3s ease-out; }

}

If you want to perform all the attributes of the transition effect on an element, then we can also use the All property value, where they share the same continuation time and the rate conversion method, such as:

A

-moz-transition:all 0.5s ease-in;

-webkit-transition:all 0.5s ease-in;

-o-transition:all 0.5s ease-in;

Transition:all 0.5s ease-in;

}

Comprehensive above we can give transition a shorthand method: Transition: <property> <duration> <animation type> <delay> as shown in the following figure:

A corresponding sample code:

p {

-webkit-transition:all 5s ease-in-out 1s;

-o-transition:all 5s ease-in-out 1s;

-moz-transition:all 5s ease-in-out 1s;

Transition:all 5s ease-in-out 1s;

}

First, change the width of the property

Div.css3-transition-test1 {
Transition:width 1s ease-in;
-moz-transition:width 1s ease-in; /* Firefox 4 * *
-webkit-transition:width 1s ease-in; * Safari and Chrome * *
-o-transition:width 1s ease-in; /* Opera * *
}

Two, change multiple attributes

P.css3-transition-test2 {
-webkit-transition:-webkit-transform 1s, opacity 1s, background 1s, width 1s, height 1s, font-size 1s;
-moz-transition-property:width, height,-o-transform, background, font-size, opacity;
-moz-transition-duration:1s, 1s, 1s, 1s, 1s, 1s;
-o-transition-property:width, height,-o-transform, background, font-size, opacity;
-o-transition-duration:1s, 1s, 1s, 1s, 1s, 1s;
Transition-property:width, height, transform, background, font-size, opacity;
transition-duration:1s, 1s, 1s, 1s, 1s, 1s;
}

P.css3-transition-test2:hover {
-webkit-transform:rotate (360DEG);
-moz-transform:rotate (360DEG);
-o-transform:rotate (360DEG);
Transform:rotate (360DEG);
}