Learn css3 animation property Transition

Transition :[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

Default Value: Look at each individual attributes

Value:

[ transition-property ]: Retrieves or sets the properties of the transition in the object
[ transition-duration ]: retrieves or sets the duration of the object transition
[ transition-timing-function ]: retrieves or sets the animation type of the transition in the object
[ transition- Delay ]: Retrieve or set the time for the object to delay the transition. After
reading this, I feel that this gadget is similar to the border in css.
The example is here: http://codepen.io/kujian/pen/DreiE
For example:
transition:color 0.2s easy-in-out .1s;
this is the abbreviation.

Transition-property:color; transition-duration:.2s; transition-timing-function:ease-in-out; transition-delay:.1s; This is similar to the border I just mentioned, that is, the effect Disassembled, this achieves multiple effects and responds at the same time. Of course, defining different rates and display intervals will also have wonderful results. Transition:color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

Transition-property:color, background-color, color; transition-duration: .5s, .5s, .5s; transition-timing-function:ease-in, ease-in, ease-in; transition-delay:.1s, .1s, .1s;
The value of transition-property is as follows: (basically the css attribute can be used)

Transition-property : none | all | [ <IDENT> ] [ ',' <IDENT> ]*

Transition-property is used to specify the transition effect when one of the attributes of the element changes. It has the following values: none (no attribute change); all (all attribute changes) is also its default value; indent (element attribute name) When the value is none, the transition stops executing immediately. When specified as all, the transition effect is executed when the element produces any attribute value change. ident is an attribute value of the specified 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 and other 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, etc.

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, Attributes such as background-position;

4, integer discrete steps (the entire number), in the real digital space, and the use of floor () converted to integers, such as: offline-offset, z-index and other attributes;

5, number real (floating point) values, such as: zoom, opacity, font-weight and other attributes;

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

7, rectangle: through x, y, width and height (transfer to a numerical value) transformation, such as: crop;

8, visibility: discrete steps, within the range of 0 to 1 number, 0 means "hidden", 1 means completely "display", such as: visibility;

9, shadow: acts on color, x, y, and blur (fuzzy) attributes, such as: text-shadow;

10. gradient: changes by 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): only support the following situation: 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, 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 change.

Specifically, what CSS properties can achieve the transition effect, all the CSS property values ​​and value types that can achieve the transition effect are listed in the W3C official website. You can click here for details. One thing to be reminded here is that not all property changes are triggering transition effects, such as the adaptive width of the page. When the browser changes the width, it does not trigger the transition effect. However, the attribute type change shown in the above table will trigger a transition action effect.
Transition-duration : <time> [, <time>]*

Transition-duration is used to specify the duration of the element conversion process. Value: <time> is a value in s (seconds) that can be applied to all elements, including: before and :after pseudo-elements. The default value is 0, which means that the transformation is immediate.
Third, transition-timing-function:

Syntax:

Transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out |
cubic-bezier(<number>, <number>, <number>, <number>) [, ease | Ease-in |
ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

Value:

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

1, ease: (gradually slower) default value, the ease function is equivalent to the 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. The four values ​​(x1, y1, x2, y2) are specific to the point P1 and point P2 on the curve. All values ​​need to be in the [0, 1] area, otherwise invalid.

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

Schematic diagram of several other attributes:
Fourth, transition-delay:

Syntax:
transition-duration : <time> [, <time>]*transition-delay : <time> [, <time>]*

Transition-delay is used to specify the time when an animation starts to execute, that is, how long it takes to start the transition effect after changing the value of the element attribute. Value: <time> is the value, the unit is s (seconds), its use Much like transition-duration, it can also be applied to all elements, including: before and :after pseudo-elements. The default size is "0", which means that the transformation is executed immediately, with no delay.

Yes, the last one, this stuff, different browsers have their own private properties in it.

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; 
} 

ie10 already supports attributes.