CSS3 Series Three (CSS3 Animation)
1. What is CSS3 animation
通过CSS3，能够创建动画，这可以在许多网页中取代动画图片、Flash动画以及JavaScript。
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。
2. CSS3 @keyframes rules
如需在CSS3中创建动画，需学习@keyframes规则。@keyframes规则用于创建动画。
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
Browser compatibility:
Firefox supports an alternate @-moz-keyframes rule.
Opera supports an alternative @-o-keyframes rule.
Safari and Chrome support an alternate @-webkit-keyframes rule.
Internet Explorer 9, and earlier versions, do not support the @keyframe rule.
定义和用法：
通过@keyframes规则，能够创建动画。创建动画的原理是，将一套CSS样式逐渐变化为另一套样式。
在动画过程中，能够多次改变这套CSS样式。
以百分比来规定改变发生的时间，或者通过关键词"from"和"to"，等价于0%和100%。
0%是动画的开始时间，100%动画的结束时间。为了获得最佳的浏览器支持，应该始终定义 0%和100%选择器。
请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
Syntax:
@keyframes animationname {keyframes-selector {css-styles;}}
animationname , required, defines the name of the animation.
keyframes-selector, required. The percentage of animation duration. Valid values: 0-100%, from (same as 0%), to (same as 100%)
css-styles , required, one or more valid CSS style properties.
3. CSS3 animation
当在@keyframes中创建动画时，需要把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少动画名称和动画时长两项CSS3动画属性，即可将动画绑定到选择器。若忽略时长，动画不会允许，因为默认值是0。
用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%。0%是动画的开始，100%是动画的完成。
为了得到最佳的浏览器支持，应该始终定义0%和100%选择器。
Fourth, CSS3 animation properties
[1] animation (shorthand property for all animation properties, except animation-play-state property)
浏览器兼容性：
Internet Explorer 10、Firefox 以及Opera支持animation属性。
Safari和Chrome支持替代的-webkit-animation属性。
Internet Explorer 9以及更早的版本不支持animation属性。
Definition and usage:
The animation property is a shorthand property used to set six animation properties:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
needs to specify the animation-duration property, otherwise the duration If it is 0, the animation will not be played.
语法：
animation: name duration timing-function delay iteration-count direction;
参数说明：
animation-name：规定需要绑定到选择器的keyframe名称。
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function：规定动画的速度曲线。
animation-delay：规定在动画开始之前的延迟。
animation-iteration-count：规定动画应该播放的次数。
animation-direction：规定是否应该轮流反向播放动画。
[2] animation-name (specify the name of the @keyframes animation)
Browser Compatibility:
Internet Explorer 10, Firefox, and Opera support the animation-name property.
Safari and Chrome support an alternate -webkit-animation-name property.
The animation-name property is not supported in Internet Explorer 9 and earlier.
定义和用法：
animation-name属性为@keyframes动画规定名称。默认值为none。
Syntax:
animation-name: keyframename|none;
Parameter description:
keyframename: Specifies the name of the keyframe that needs to be bound to the selector.
none specifies no animation effect (can be used to override animations from cascades).
[3] animation-duration (specify the seconds or milliseconds it takes for the animation to complete a cycle, the default is 0)
浏览器兼容性：
Internet Explorer 10、Firefox 以及 Opera 支持animation-duration属性。
Safari和Chrome支持替代的-webkit-animation-duration属性。
Internet Explorer 9 以及更早的版本不支持animation-duration属性。
Definition and usage:
The animation-duration property defines the time, in seconds or milliseconds, the animation takes to complete a cycle. The default value is 0.
语法：
animation-duration: time;
参数描述：
time：规定完成动画所花费的时间。默认值是0，意味着没有动画效果。
[4] animation-timing-function (specify the speed curve of the animation, the default is "ease")
浏览器兼容性：
Internet Explorer 10、Firefox 以及 Opera 支持 animation-timing-function 属性。
Safari 和 Chrome 支持替代的 -webkit-animation-timing-function 属性。
Internet Explorer 9 以及更早的版本不支持 animation-timing-function 属性。
Definition and usage:
animation-timing-function specifies the speed curve of the animation. A velocity curve defines the time it takes for an animation to change from one set of CSS styles to another.
Velocity curves are used to smooth out changes. The default value is ease.
语法：
animation-timing-function: value;
参数说明：
animation-timing-function使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。
能够在该函数中使用自己的值，也可以预定义的值：
linear动画从头到尾的速度是相同的。
ease默认。动画以低速开始，然后加快，在结束前变慢。
ease-in动画以低速开始。
ease-out动画以低速结束。
ease-in-out动画以低速开始和结束。
cubic-bezier(n,n,n,n)在 cubic-bezier函数中自己的值。可能的值是从0到1的数值。
[5] animation-delay (specify when the animation starts, the default is 0)
Browser compatibility:
Internet Explorer 10, Firefox, and Opera support the animation-delay property.
Safari and Chrome support an alternate -webkit-animation-delay property.
The animation-delay property is not supported in Internet Explorer 9 and earlier.
定义和用法：
animation-delay属性定义动画何时开始。animation-delay值以秒或毫秒计。
允许负值，-2s使动画马上开始，但跳过2秒进入动画。默认值是0。
Syntax:
animation-delay: time;
Parameter description:
time is optional, defines the time to wait before the animation starts, in seconds or milliseconds, the default value is 0.
[6] animation-iteration-count (specify the number of times the animation is played, the default is 1)
浏览器兼容性：
Internet Explorer 10、Firefox 以及 Opera 支持animation-iteration-count属性。
Safari 和 Chrome 支持替代的-webkit-animation-iteration-count属性。
Internet Explorer 9 以及更早的版本不支持animation-iteration-count属性。
Definition and usage:
The animation-iteration-count property defines the number of times the animation is played. The default value is 1.
语法：
animation-iteration-count: n|infinite;
参数说明：
n定义动画播放次数的数值。
infinite规定动画应该无限次播放。
[7] animation-direction (specify whether the animation is played in reverse in the next cycle, the default is "normal")
浏览器兼容性：
Internet Explorer 10、Firefox 以及 Opera 支持 animation-direction 属性。
Safari 和 Chrome 支持替代的 -webkit-animation-direction 属性。
Internet Explorer 9 以及更早的版本不支持 animation-direction 属性。
Definition and usage:
The animation-direction property defines whether the animation should take turns playing in reverse.
If the animation-direction value is "alternate", the animation will play normally at odd numbers (1, 3, 5, etc.) and backwards at even numbers (2, 4, 6, etc.).
This property has no effect if the animation is set to play only once. The default value is normal.
语法：
animation-direction: normal|alternate;
参数说明：
normal默认值。动画应该正常播放。
alternate动画应该轮流反向播放。
[8] animation-play-state (specify whether the animation is running or paused, the default is "running")
浏览器兼容性：
Internet Explorer 10、Firefox 以及 Opera 支持 animation-play-state 属性。
Safari 和 Chrome 支持替代的 -webkit-animation-play-state 属性。
Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。
Definition and usage:
The animation-play-state property specifies whether the animation is running or paused.
This property can be used in JavaScript to pause the animation during playback. The default value is running.
The JavaScript syntax is object.style.animationPlayState=”paused”
语法：
animation-play-state: paused|running;
paused规定动画已暂停。
running规定动画正在播放。
[9] animation-fill-mode (specify the state outside the animation time of the object)
Browser Compatibility:
Internet Explorer 10, Firefox, and Opera support the animation-fill-mode property.
Safari and Chrome support an alternate -webkit-animation-fill-mode property.
The animation-fill-mode property is not supported in Internet Explorer 9 and earlier.
定义和用法：
animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。
其属性值是由逗号分隔的一个或多个填充模式关键词。默认值是none。
Syntax:
animation-fill-mode : none | forwards | backwards | both;
parameter description:
none: does not change the default behavior.
forwards: When the animation is complete, keep the last property value (defined in the last keyframe).
backwards : The start property value (defined in the first keyframe) is applied before the animation is displayed for the period of time specified by animation-delay.
both: Both forward and backward fill modes are applied.