animation-timing-function的参数：
|
值 |
属性 |
|
linear |
动画从头至尾的速度是相同的 |
|
ease |
默认，低速开始，加快，变慢结束 |
|
ease-in |
动画以低速开始 |
|
ease-out |
动画以词素结束 |
|
ease-in-out |
动画以低速开始和结束 |
|
cubic-bezier(n,n,n,n) |
在cubic-bezier函数中自己的值，可能是0-1 |
|
steps(n,start) |
默认为end，动画帧之间跳跃步数 |
注：cubic-bezier即为贝兹曲线中的绘制方法
steps的设置都是针对两个关键帧之间的，而非是整个keyframes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动画的timing-function比较</title> <style> div { width:100px; height:50px; background:red; color:white; font-weight:bold; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari and Chrome */ } #div1 {animation-timing-function:linear;} #div2 {animation-timing-function:ease;} #div3 {animation-timing-function:ease-in;} #div4 {animation-timing-function:ease-out;} #div5 {animation-timing-function:ease-in-out;} #div5 {animation-timing-function:ease-in-out;} #div6 {animation-timing-function:cubic-bezier(0.5, 0, 1.0, 1.0);} #div7 {animation-timing-function:cubic-bezier(0.5, 0, 1.0, 1.0);} /* Safari and Chrome: */ #div1 {-webkit-animation-timing-function:linear;} #div2 {-webkit-animation-timing-function:ease;} #div3 {-webkit-animation-timing-function:ease-in;} #div4 {-webkit-animation-timing-function:ease-out;} #div5 {-webkit-animation-timing-function:ease-in-out;} #div6 {-webkit-animation-timing-function:cubic-bezier(0.5, 0, 1.0, 1.0);} #div7 {-webkit-animation-timing-function:cubic-bezier(0.5, 0, 1.0, 1.0);} @keyframes mymove { from {left:0px;} to {left:300px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { from {left:0px;} to {left:300px;} } </style> </head> <body> <p>animation-timing-funtion属性比较</p> <div id="div1">linear</div> <div id="div2">ease</div> <div id="div3">ease-in</div> <div id="div4">ease-out</div> <div id="div5">ease-in-out</div> <div id="div6">贝兹曲线</div> <div id="div7">cubic-bezier(0.0, 0.0, 1.0, 1.0)</div> </body> </html>