CSS3アニメーションの概要

仕事で、私は必然的に何かを忘れてしまったので、問い合わせを容易にするための要約を行いますので。

0一般的な効果/変換（トランスフォーム）

スケール（2Dスケーリング）
ローテート（2D回転）
変換（2D変換）
スキュー（2D傾き）

1. キーフレームは、
この属性は、キーフレームのシリーズを定義するために使用されます。これは、アニメーション実行中のプロセス全体における中間点です。

1  @keyframes zoomIn {
 2      0％{変換：スケール（0 ）;}
 3      60％{変換：スケール（1.1 ）;}
 4      100％{変換：スケール（1 ）;}
 5  }
 6 @ -moz- キーフレームzoomIn {
 7      0％{変換：スケール（0 ）;}
 8      60％{変換：スケール（1.1 ）;}
 9      100％{変換：スケール（1 ）;}
 10  }
 11 @ -webkit- キーフレームzoomIn {
 12      0％{-webkit-変換：スケールは（0 ）;}
 13      60％{-webkit-変換：スケール（1.1 ）;}
 14      100％{-webkit-変換：スケール（1 ）;}
 15  }
 16 -O- @ キーフレームzoomIn {
 17      0％は{-O-変換：スケール（0 ）;}
 18      90％を{-O-変換：スケール（1.1 ）;}
 19      100変換-O-％{：スケール（1 ）;}
 20  }
 21 -ms- @ zoomIn {キーフレーム
 22      0％{-msは、変換：スケール（0）;}
 23      60％{-ms-変換：スケール（1.1 ）;}
 24      100％{-ms-変換：スケール（1 ）;}
 25 }

2. アニメーションのプロパティ

略語：

animation: name duration timing-function delay iteration-count direction;


3.animation-fill-mode 填充模式
该属性有四个值
none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态（触发之前）
backwards：设置对象状态为动画开始时的状态（触发之后）
both：设置对象状态为动画结束或开始的状态（）
4.事件

在动画的世界里，总有这样的需求，就是某个动画结束了之后才进行下一个动画，这个时候就要知道上一个动画是什么时候结束的了。虽然可以用setTimeout来计时达到差不多的效果，但是总感觉不够精确。
还好，CSS3的动画有js事件。
开始：animationstart
迭代：animationiteration
结束：animationend

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>delay</title>
 6 <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 
 8 <style type="text/css">
 9     @-webkit-keyframes delay{
10         
11         100%{
12             -webkit-transform:translate(100px,0);
13         }
14        
15     }
16     .delay{
17 
18         width:100px;height:100px;
19         background-color: #000;
20         -webkit-animation:delay 1s linear 2 both alternate;
21     }
22 </style>
23 </head>
24 <body>
25     <div class="delay"></div>
26     <script type="text/javascript">
27     window.onload = function(){
28         var delay = document.getElementsByClassName('delay')[0],
29         time1,
30         time2;
31         delay.addEventListener('webkitAnimationStart',function(){
32             time1 = new Date().getTime();
33             time2 = time1;
34             console.log(time2-time1+'ms')
35             
36         })
37         delay.addEventListener('webkitAnimationIteration',function(){
38             time2 = new Date().getTime();
39             console.log(time2-time1+'ms')
40         })
41         delay.addEventListener('webkitAnimationEnd',function(){
42             time2 = new Date().getTime();
43             console.log(time2-time1+'ms')
44         })
45     }
46     </script>
47 </body>
48 </html>

おすすめ