animation-timing-function

animation-timing-function属性指定动画将如何完成一个周期

前端控更新时间：2019-03-23 13:31:32

具体内容
相关视频
相关知识
最新评论

animation-timing-function属性

含义：

animation-timing-function属性指定动画将如何完成一个周期。

速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。

速度曲线用于使变化更为平滑。

浏览器支持：

属性
浏览器	IE	Chrome	Firefox	Safari	Opera
animation-timing-function	10.0	43.0/4.0 -webkit-	16.0/5.0 -moz-	9.0/4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

CSS语法：

animation-timing-function: value;

属性值：

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

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

ease-in：动画以低速开始

ease-out：动画以低速结束

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

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

让方块以低速开始和结束

实例

<style type="text/css">
div{
	width:100px;
	height:100px;
	position: relative;
	background-color:hsl(120,65%,75%);
	animation:demo 5s 1 ;
	-webkit-animation:demo 5s 1;
	animation-timing-function:ease-in-out;
	-webkit-animation-timing-function:ease-in-out;
	}
@keyframes demo
{
from {left:0px;}
to {left:350px;
}
}
 /*Safari 和 Chrome */
@-webkit-keyframes demo
{
from {left:0px;}
to {left:350px;
}
}
</style>
</head>
<body>
	<div></div>	
</body>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图：

推荐手册

animation-timing-function

实例