标签：bsp htm explorer out 自己的 name function .com com
定义和用法
animation 属性是一个简写属性，用于设置六个动画属性：
1.animation-name 规定需要绑定到选择器的 keyframe 名称。
2.animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
3.animation-timing-function 规定动画的速度曲线。
属性有：
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
官方代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 div
6 {
7 width:100px;
8 height:50px;
9 background:red;
10 color:white;
11 font-weight:bold;
12 position:relative;
13 animation:mymove 5s infinite;
14 -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
15 }
16
17 #div1 {animation-timing-function:linear;}
18 #div2 {animation-timing-function:ease;}
19 #div3 {animation-timing-function:ease-in;}
20 #div4 {animation-timing-function:ease-out;}
21 #div5 {animation-timing-function:ease-in-out;}
22
23 /* Safari and Chrome: */
24 #div1 {-webkit-animation-timing-function:linear;}
25 #div2 {-webkit-animation-timing-function:ease;}
26 #div3 {-webkit-animation-timing-function:ease-in;}
27 #div4 {-webkit-animation-timing-function:ease-out;}
28 #div5 {-webkit-animation-timing-function:ease-in-out;}
29
30 @keyframes mymove
31 {
32 from {left:0px;}
33 to {left:300px;}
34 }
35
36 @-webkit-keyframes mymove /* Safari and Chrome */
37 {
38 from {left:0px;}
39 to {left:300px;}
40 }
41 </style>
42 </head>
43 <body>
44
45 <p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-timing-function 属性。</p>
46
47 <div id="div1">linear</div>
48 <div id="div2">ease</div>
49 <div id="div3">ease-in</