CSS的animation属性使用实例讲解

 　　一、animation的语法

　　1、@keyframes——插入关键帧

　　(1)FormTo形式：

　　CSS Code复制内容到剪贴板

　　@keyframes demo {

　　from {

　　Properties:Properties value;

　　}

　　Percentage {

　　Properties:Properties value;

　　}

　　to {

　　Properties:Properties value;

　　}

　　}

　　(2)百分比的形式：

　　CSS Code复制内容到剪贴板

　　@keyframes demo {

　　0% {

　　Properties:Properties value;

　　}

　　Percentage {

　　Properties:Properties value;

　　}

　　100% {

　　Properties:Properties value;

　　}

　　}

　　2、animation-name——定义动画的名称

　　animation-name: none | “动画的名称”;

　　(1)动画的名称是由Keyframes创建的动画名，这里必须和创建的动画名保持一致。如果不一致,将不能实现任何动画效果

　　(2)none为默认值，当值为none时，将没有任何动画效果

　　3、animation-duration

　　animation-duration: time (s)

　　animation-duration是指定元素播放动画所持续的时间，取值为数值，单位为秒(s)，其默认值为“0”。

　　4、animation-timing-function

　　animation-timing-function:ease(缓冲) || ease-in(加速) || ease-out(减速) || ease-in-out(先加速后减速) || linear(匀速) || cubic-bezier(自定义一个时间曲线)

　　animation-timing-function是用来指定动画的播放方式，具有以下六种变换方式：ease(缓冲);ease-in(加速);ease-out(减速);ease-in-out(先加速后减速);linear(匀速);cubic-bezier(自定义一个时间曲线)。

　　5、animation-delay

　　animation-delay: time(s)

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

　　6、animation-iteration-count

　　animation-iteration-count:infinite || number

　　animation-iteration-count是指定元素播放动画的循环次数，其取值为数字，默认值为“1”或者infinite(无限次数循环)。

　　7、animation-direction

　　animation-direction: normal || alternate

　　animation-direction是指定元素动画播放的方向，如果是normal，那么动画的每次循环都是向前播放;如果是alternate，那么动画播放在第偶数次向前播放，第奇数次向反方向播放。

　　8、animation-play-state

　　animation-play-state:running || paused

　　animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值，running和paused，其中running为默认值。这个属性目前很少内核支持，所以只是稍微提一下。

　　二、animation事件接口

　　其实目前基本的就是三个事件而已：开始、迭代、结束。开始和结束都知道是什么意思。至于这个迭代，由于animation中有个iteration-count属性，它可以定义动画重复的次数，因此动画会有许多次开始和结束。但是真正的“开始”和“结束”事件是关于整个动画的，他们只会触发一次，而中间由于重复动画引起的“结束并开始下一次”将触发整个“迭代”事件。

　　这三个事件的标准名称是：

　　开始：animationstart

　　迭代：animationiteration

　　结束：animationend

　　但是目前版本的Chrome需要加上webkit前缀，而且还要注意大小写

　　开始：webkitAnimationStart

　　迭代：webkitAnimationIteration

　　结束：webkitAnimationEnd

　　最后是实例代码和截图

　CSS Code复制内容到剪贴板

1. <style>
2. @-webkit-keyframes test {
3. 0% {background:red;}
4. 25% {background:green;}
5. 50% {background:blue;}
6. 100% {background:red;}
7. }
8. @keyframes test {
9. 0% {background:red;}
10. 25% {background:green;}
11. 50% {background:blue;}
12. 100% {background:red;}
13. }
14. </style>
15. <script>
16. onload=function(){
17. var html=document.documentElement;
18. //定义事件回调函数
19. var start=function(){
20. console.log("start");
21. },iteration=function(e){
22. console.log(e);
23. },end=function(){
24. console.log("end");
25. };
26. //绑定事件
27. html.addEventListener("webkitAnimationIteration",iteration);
28. html.addEventListener("animationiteration",iteration);
29. html.addEventListener("webkitAnimationStart",start);
30. html.addEventListener("animationstart",start);
31. html.addEventListener("webkitAnimationEnd",end);
32. html.addEventListener("animationend",end);
33. //开始执行动画
34. html.style.animation=
35. html.style.WebkitAnimation=
36. "test 1s linear 0s 3";
37. };
38. </script