CSS3系列三（CSS3动画 ）

CSS3系列三（CSS3动画 ）

一、什么是CSS3动画

通过CSS3，能够创建动画，这可以在许多网页中取代动画图片、Flash动画以及JavaScript。
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。

二、CSS3 @keyframes 规则

如需在CSS3中创建动画，需学习@keyframes规则。@keyframes规则用于创建动画。
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。

浏览器兼容性：
Firefox 支持替代的@-moz-keyframes规则。
Opera 支持替代的@-o-keyframes规则。
Safari 和 Chrome 支持替代的@-webkit-keyframes规则。
Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则。

定义和用法：
通过@keyframes规则，能够创建动画。创建动画的原理是，将一套CSS样式逐渐变化为另一套样式。
在动画过程中，能够多次改变这套CSS样式。
以百分比来规定改变发生的时间，或者通过关键词"from"和"to"，等价于0%和100%。
0%是动画的开始时间，100%动画的结束时间。为了获得最佳的浏览器支持，应该始终定义 0%和100%选择器。
请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

语法：
@keyframes animationname {keyframes-selector {css-styles;}}
animationname ，必需，定义动画的名称。
keyframes-selector，必需。动画时长的百分比。合法的值：0-100%，from（与0%相同），to（与100%相同）
css-styles ，必需，一个或多个合法的 CSS 样式属性。

三、CSS3动画

当在@keyframes中创建动画时，需要把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少动画名称和动画时长两项CSS3动画属性，即可将动画绑定到选择器。若忽略时长，动画不会允许，因为默认值是0。
用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%。0%是动画的开始，100%是动画的完成。
为了得到最佳的浏览器支持，应该始终定义0%和100%选择器。

四、CSS3动画属性

【1】animation（所有动画属性的简写属性，除了 animation-play-state 属性）

浏览器兼容性：
Internet Explorer 10、Firefox 以及Opera支持animation属性。
Safari和Chrome支持替代的-webkit-animation属性。
Internet Explorer 9以及更早的版本不支持animation属性。

定义和用法：
animation属性是一个简写属性，用于设置六个动画属性：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
需要规定 animation-duration 属性，否则时长为0，就不会播放动画了。

语法：
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（规定 @keyframes 动画的名称）

浏览器兼容性：
Internet Explorer 10、Firefox 以及 Opera 支持animation-name属性。
Safari 和 Chrome 支持替代的-webkit-animation-name属性。
Internet Explorer 9 以及更早的版本不支持animation-name属性。

定义和用法：
animation-name属性为@keyframes动画规定名称。默认值为none。

语法：
animation-name: keyframename|none;
参数说明：
keyframename：规定需要绑定到选择器的keyframe的名称。
none 规定无动画效果（可用于覆盖来自级联的动画）。

【3】animation-duration（规定动画完成一个周期所花费的秒或毫秒，默认是 0）

浏览器兼容性：
Internet Explorer 10、Firefox 以及 Opera 支持animation-duration属性。
Safari和Chrome支持替代的-webkit-animation-duration属性。
Internet Explorer 9 以及更早的版本不支持animation-duration属性。

定义和用法：
animation-duration属性定义动画完成一个周期所需要的时间，以秒或毫秒计。默认值是0。

语法：
animation-duration: time;
参数描述：
time：规定完成动画所花费的时间。默认值是0，意味着没有动画效果。

【4】animation-timing-function（规定动画的速度曲线，默认是 “ease”）

浏览器兼容性：
Internet Explorer 10、Firefox 以及 Opera 支持 animation-timing-function 属性。
Safari 和 Chrome 支持替代的 -webkit-animation-timing-function 属性。
Internet Explorer 9 以及更早的版本不支持 animation-timing-function 属性。

定义和用法：
animation-timing-function规定动画的速度曲线。速度曲线定义动画从一套CSS样式变为另一套所用的时间。
速度曲线用于使变化更为平滑。默认值是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（规定动画何时开始，默认是 0）

浏览器兼容性：
Internet Explorer 10、Firefox 以及 Opera 支持 animation-delay 属性。
Safari 和 Chrome 支持替代的 -webkit-animation-delay 属性。
Internet Explorer 9 以及更早的版本不支持 animation-delay 属性。

定义和用法：
animation-delay属性定义动画何时开始。animation-delay值以秒或毫秒计。
允许负值，-2s使动画马上开始，但跳过2秒进入动画。默认值是0。

语法：
animation-delay: time;
参数说明：
time 可选，定义动画开始前等待的时间，以秒或毫秒计，默认值是 0。

【6】animation-iteration-count（规定动画被播放的次数，默认是 1）

浏览器兼容性：
Internet Explorer 10、Firefox 以及 Opera 支持animation-iteration-count属性。
Safari 和 Chrome 支持替代的-webkit-animation-iteration-count属性。
Internet Explorer 9 以及更早的版本不支持animation-iteration-count属性。

定义和用法：
animation-iteration-count 属性定义动画的播放次数。默认值是1。

语法：
animation-iteration-count: n|infinite;
参数说明：
n定义动画播放次数的数值。
infinite规定动画应该无限次播放。 

【7】animation-direction（规定动画是否在下一周期逆向地播放，默认是 “normal”）

浏览器兼容性：
Internet Explorer 10、Firefox 以及 Opera 支持 animation-direction 属性。
Safari 和 Chrome 支持替代的 -webkit-animation-direction 属性。
Internet Explorer 9 以及更早的版本不支持 animation-direction 属性。

定义和用法：
animation-direction属性定义是否应该轮流反向播放动画。
如果animation-direction值是 “alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
如果把动画设置为只播放一次，则该属性没有效果。默认值是normal。

语法：
animation-direction: normal|alternate;
参数说明：
normal默认值。动画应该正常播放。
alternate动画应该轮流反向播放。    

【8】animation-play-state （规定动画是否正在运行或暂停，默认是 “running”）

浏览器兼容性：
Internet Explorer 10、Firefox 以及 Opera 支持 animation-play-state 属性。
Safari 和 Chrome 支持替代的 -webkit-animation-play-state 属性。
Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。

定义和用法：
animation-play-state 属性规定动画正在运行还是暂停。
可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。默认值是running。
JavaScript 语法为object.style.animationPlayState=”paused”

语法：
animation-play-state: paused|running;
paused规定动画已暂停。
running规定动画正在播放。    

【9】animation-fill-mode（规定对象动画时间之外的状态）

浏览器兼容性：
Internet Explorer 10、Firefox 以及 Opera 支持 animation-fill-mode 属性。
Safari 和 Chrome 支持替代的 -webkit-animation-fill-mode 属性。
Internet Explorer 9 以及更早的版本不支持 animation-fill-mode 属性。

定义和用法：
animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。
其属性值是由逗号分隔的一个或多个填充模式关键词。默认值是none。

语法：
animation-fill-mode : none | forwards | backwards | both;
参数说明：
none：不改变默认行为。
forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards ：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。