CSS3 Animation（下）

         三、animation-timing-function:

       语法：

1. animation-timing-function:ease | 
2. linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,
3. <number>, <number>, <number>) [, ease | linear | 
4. ease-in | ease-out | ease-in-out | cubic-bezier(<number>, 
5. <number>, <number>, <number>)]*

复制代码

       取值说明：

       animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。他和transition中的transition-timing-function一样，具有以下六种变换方式：ease;ease-in;ease-in-out;linear;cubic-bezier。具体的使用方法大家可以点这里，查看其中transition-timing-function的使用方法。

       四、animation-delay:

       语法：

1. animation-delay: <time>[,<time>]*

复制代码

       取值说明：

       animation-delay:是用来指定元素动画开始时间。取值为<time>为数值，单位为s(秒)，其默认值也是0。这个属性和transition-delayy使用方法是一样的。

       五、animation-iteration-count

       语法：

1. animation-iteration-count:infinite | <number> [, infinite | <number>]*

复制代码

       取值说明：

       animation-iteration-count是用来指定元素播放动画的循环次数，其可以取值<number>为数字，其默认值为“1”；infinite为无限次数循环。

       六、animation-direction

       语法：

1. animation-direction: normal | alternate [, normal | alternate]*

复制代码

       取值说明：

       animation-direction是用来指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

       七、animation-play-state

       语法：

1. animation-play-state:running | paused [, running | paused]*

复制代码

       取值说明：

       animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值，running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样，可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放，我们这里的重新播放不一定是从元素动画的开始播放，而是从你暂停的那个位置开始播放。另外如果暂时了动画的播放，元素的样式将回到最原始设置状态。这个属性目前很少内核支持，所以只是稍微提一下。

       上面我们分别介绍了animation中的各个属性的语法和取值，那么我们综合上面的内容可以给animation属性一个速记法：

1. animation:[<animation-name> || 
2. <animation-duration> || <animation-timing-function> || 
3. <animation-delay> || <animation-iteration-count> || 
4. <animation-direction>] [, [<animation-name> || 
5. <animation-duration> || <animation-timing-function> || 
6. <animation-delay> || <animation-iteration-count> || 
7. <animation-direction>] ]*

复制代码

       如下图所示

       兼容的浏览器

       前面我也简单的提过，CSS3的animation到目前为止只支持webkit内核的浏览器，因为最早提出这个属性的就是safari公司,据说Firefox5.0+将支持Animation。那么到此为止，我们主要一起学习了有关animation的理论知识，下面我们一起来看两个实例制作过程，来加强对animation的实践能力

       DEMO一：发光变色的button

       我们这个demo主要是通过在keyframes中改变元素的background;color;box-shadow三个属性，来达到一种发光变色的button效果，我们来看看其实现代码

       HTML Code:

1. <a href="" class="btn">发光的button</a>

复制代码

       CSS Code

1. /*给这个按钮创建一个动名名称：buttonLight，然后在每个时间段设置不同的background,color来达到变色效果，改变box-shadow来达到发光效果*/ 
2. @-webkit-keyframes 'buttonLight' { f
3. rom { 
4. background: rgba(96, 203, 27,0.5); 
5. -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset, 0 0 3px rgba(220, 120, 200, 0.5); 
6. color: red; 
7. } 
8. 25% { 
9. background: rgba(196, 203, 27,0.8); 
10. -webkit-box-shadow: 0 0 10px rgba(255, 155, 255, 0.5) inset, 0 0 8px rgba(120, 120, 200, 0.8); 
11. color: blue; 
12. } 
13. 50% { 
14. background: rgba(196, 203, 127,1); 
15. -webkit-box-shadow: 0 0 5px rgba(155, 255, 255, 0.3) inset, 0 0 3px rgba(220, 120, 100, 1); 
16. color: orange; 
17. } 
18. 75% { 
19. background: rgba(196, 203, 27,0.8); 
20. -webkit-box-shadow: 0 0 10px rgba(255, 155, 255, 0.5) inset, 0 0 8px rgba(120, 120, 200, 0.8);  
21. color: black; 
22. } 
23. to { 
24. background: rgba(96, 203, 27,0.5); 
25. -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset, 0 0 3px rgba(220, 120, 200, 0.5); c
26. olor: green; 
27. } 
28. } 
29. a.btn { 
30. /*按钮的基本属性*/ 
31. background: #60cb1b; 
32. font-size: 16px; 
33. padding: 10px 15px; 
34. color: #fff; 
35. text-align: center; 
36. text-decoration: none; 
37. font-weight: bold; 
38. text-shadow: 0 -1px 1px rgba(0,0,0,0.3); 
39. -moz-border-radius: 5px; 
40. -webkit-border-radius: 5px; 
41. border-radius: 5px; 
42. -moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8); -
43. webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8); 
44. box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8); 
45. /*调用animation属性，从而让按钮在载入页面时就具有动画效果*/ 
46. -webkit-animation-name: "buttonLight"; /*动画名称，需要跟@keyframes定义的名称一致*/ 
47. -webkit-animation-duration: 5s;/*动画持续的时间长*/ 
48. -webkit-animation-iteration-count: infinite;/*动画循环播放的次数*/ 
49. }

复制代码

       效果：

       为了更好的看出这个demo的效果，你可以把上面的代码复制到你本过的页面上，并使用safari和chrome，你会觉得很有意思，整个按钮好像在不停的呼吸一样。

       Demo二：方形旋转变成圆型

       我们这个demo是通过transform的rotate和border-radius不同值，把一个方型图片随着时间的推移，慢慢的转换成了个圆型效果，下面我们来看看其具体实现的效果

       HTML Code:

1. <a href="#" class="box"></a> 
2.  
3. <span class="click-btn">Click</span>

复制代码

       CSS Code:

1. /*定义方型转化为圆型的动画round*/ 
2. @-webkit-keyframes 'round' { 
3. from{ 
4. -webkit-transform: rotate(36deg); 
5. -webkit-border-radius: 2px; 
6. } 
7. 10%{ 
8. -webkit-transform: rotate(72deg); 
9. -webkit-border-radius: 4px; 
10. } 
11. 20% { 
12. -webkit-transform: rotate(108deg); 
13. -webkit-border-radius: 6px; 
14. } 
15. 30% { 
16. -webkit-transform: rotate(144deg); 
17. -webkit-border-radius: 9px; 
18. } 
19. 40%{ 
20. -webkit-transform: rotate(180deg); 
21. -webkit-border-radius: 12px; 
22. } 
23. 50%{ 
24. -webkit-transform: rotate(216deg); 
25. -webkit-border-radius: 14px; 
26. } 
27. 60% { 
28. -webkit-transform: rotate(252deg); 
29. -webkit-border-radius: 16px; 
30. } 
31. 70% { 
32. -webkit-transform: rotate(288deg); 
33. -webkit-border-radius: 19px; 
34. } 
35. 80%{ 
36. -webkit-transform: rotate(324deg); 
37. -webkit-border-radius: 22px; 
38. } 
39. to { 
40. -webkit-transform: rotate(360deg); 
41. -webkit-border-radius: 25px; 
42. } 
43. } 
44. /*给方型box一个初步样式*/ 
45. a.box { 
46. display: block; 
47. width: 50px; height: 50px; 
48. background: red; 
49. margin-bottom: 20px; 
50. } 
51. /*圆型box的样式，并在这里应用animation*/ 
52. a.round { 
53. -webkit-border-radius: 25px; 
54. -moz-border-radius: 25px; border-radius: 25px; 
55. background: green; 
56. -webkit-animation-name: 'round'; /*动画名称*/ 
57. -webkit-animation-duration: 60s;/*播放一次所持续时间*/ 
58. -webkit-animation-timing-function: ease;/*动画播放频率*/ 
59. -webkit-animation-iteration-count: infinite;/*动画播放次�馕�无限次*/ 
60. }  
61.  
62. /*click button效果*/ 
63. .click-btn { 
64. background: rgba(125,220,80,0.8); 
65. -moz-border-radius: 5px; 
66. -webkit-border-radius: 5px; 
67. border-radius: 5px; 
68. -webkit-box-shadow: inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3); 
69. -moz-box-shadow: inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3); 
70. box-shadow: inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3); 
71. padding: 5px 10px; 
72. color: #369; 
73. font-size: 16px; 
74. font-weight: bold; 
75. text-align: center; 
76. text-shadow: 0 -1px 0 rgba(0,0,0,0.5); 
77. cursor: pointer; 
78. }

复制代码

       jQuery Code:

1. <script type="text/javascript"> 
2. $(document).ready(function(){ 
3. $(".click-btn").click(function(){ 
4. $(this).siblings().addClass("round"); 
5. }); 
6. }); 
7. </script>

复制代码

       我们载入时box是没有任何动画效果的，当我们点击了click button看给原box上加上一个round的class名，从而触发了一个round的动作。请看效果：

       我们这里简单的介绍了两个demo的应用，其实大家可以发挥自己的想像制作出更好更多的动画效果，如果你对animation制作动画很感兴趣，你可以参考这几个网站：webdesignersblog、slodive、impressivewebs这上面有许多特别有意的动画demo。