animation-timing-function属性有什么用

　　CSS3animation-timing-function属性

　　作用：

　　animation-timing-function规定动画的速度曲线。速度曲线定义动画从一套CSS样式变为另一套所用的时间。速度曲线用于使变化更为平滑。

　　语法：

　　animation-timing-function:value;

　　说明：

　　animation-timing-function使用名为三次贝塞尔（CubicBezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

　　linear：动画从头到尾的速度是相同的。

　　ease：默认值。动画以低速开始，然后加快，在结束前变慢。

　　ease-in：动画以低速开始。

　　ease-out：动画以低速结束。

　　ease-in-out：动画以低速开始和结束。

　　cubic-bezier(n,n,n,n)：在cubic-bezier函数中自己的值。可能的值是从0到1的数值。

　　注：InternetExplorer9以及更早的版本不支持animation-timing-function属性。

　　CSS3animation-timing-function属性的使用示例

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<style>

　　div

　　{

　　width:100px;

　　height:100px;

　　background:red;

　　position:relative;

　　animation:mymove5sinfinite;

　　animation-timing-function:linear;

　　/*SafariandChrome*/

　　-webkit-animation:mymove5sinfinite;

　　-webkit-animation-timing-function:linear;

　　}

　　@keyframesmymove

　　{

　　from{left:0px;}

　　to{left:200px;}

　　}

　　@-webkit-keyframesmymove/*SafariandChrome*/

　　{

　　from{left:0px;}

　　to{left:200px;}

　　}

　　</style>

　　</head>

　　<body>

　　</body>

　　</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c56283.shtml