定义和用法
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