CSS3 Animation (Transition) attribute discussion

The CSS3 animation effect is often used in webapp reference development, so let's explore the use of this property together.

Where do you define animation effects?
CSS3 animations are typically defined by mouse events or state-of-the-states animations, usually by using mouse events in the pseudo-class and JS in CSS. JS events can also, such as click,focus,mousemove,mouseover,mouseout and so on

Basic syntax for transition:
CSS3 animations are implemented with transition properties and other CSS properties (color, width, height, deformation, position, etc.).
Syntax for transition:

Java code  

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

Of course, this is shorthand, we can also complete the writing:

Java code  

1. Transition-property:none | All | [<IDENT>] [ ', ' <IDENT>]*;
2. Transition-duration: <time> [, <time>]*
3. 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>)]*
4. Transition-delay: <time> [, <time>]*

1. Properties to change
Transition-property: To change the properties, such as the width of the element is width, the text color to change this is COLOR;W3C gives a list of the properties that can be transformed:

Object changed by CSS property
Background-color Color
Background-image is just a gradient
Background-position percentage, length
Border-bottom-color Color
Border-bottom-width length
Border-color Color
Border-left-color Color
Border-left-width length
Border-right-color Color
Border-right-width length
Border-spacing length
Border-top-color Color
Border-top-width length
Border-width length
Bottom percentage, length
Color colors
Crop percent
Font-size percentage, length
Font-weight Digital
Number of grid-*
Height percentage, length
Left percentage, length
Letter-spacing length
Line-height percentage, length, number
Margin-bottom length
Margin-left length
Margin-right length
Margin-top length
Max-height percentage, length
Max-width percentage, length
Min-height percentage, length
Min-width percentage, length
Opacity Digital
Outline-color Color
Outline-offset integer
Outline-width length
Padding-bottom length
Padding-left length
Padding-right length
Padding-top length
Right percent, length
Text-indent percentage, length
Text-shadow Shadow
Top percent, length
Vertical-align percent, length, key words
Visibility visibility
Width percent, length
word-spacing percentage, length
Z-index positive integers
Zoom Digital
This value also has a strong "all" value, representing all the properties of the above table;
In addition to the above attributes, of course, there are CSS3 in the CSS3 deformation, such as zooming in and out, rotating oblique cut, gradient and so on.

2. Animation time
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.

3. How animations are calculated for execution
Transition-timing-function: The calculation of animation execution, where the time function is a broken Bezier curve, fortunately CSS3 has several values:
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, functions equal to Bezier curves (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.

4. Animation Delay
Transition-delay: How long to wait between the start of an action and the transformation, usually in seconds (for example,. 1s). If you do not want to delay, the value can be omitted.
Speaking so much we look at a simple example:

Java code  

2. <ul class="Test" >
4. <li> Background color Transitions </li>
6. <li> Background color Transitions </li>
8. <li> Background color Transitions </li>
10. <li> Background color Transitions </li>
12. <li> Background color Transitions </li>
14. </ul>
18. <style>
20. . test{}
22. . Test Li{background-color: #eee;
24. -moz-transition:background-color. 5s ease-in;
26. -webkit-transition:background-color. 5s ease-in;
28. -o-transition:background-color. 5s ease-in;
30. -ms-transition:background-color. 5s ease-in;
32. Transition:background-color. 5s ease-in;}
36. . Test Li:nth-child (1): Hover{background-color: #bbb;} //mouse over background from #eee to #bbb
38. . Test Li:nth-child (2): hover{background-color:#999;} //mouse over background from #eee to #999
40. . Test Li:nth-child (3): hover{background-color:#630;} //mouse over background from #eee to #630
42. . Test Li:nth-child (4): hover{background-color:#090;} //mouse over background from #eee to #090
44. . Test Li:nth-child (5): Hover{background-color: #f00;} //mouse over background from #eee to #f00
46. </style>