animation-timing-function

版本：CSS3

CSSanimation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。可能值为一或多个<timing-function>。

对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始开始，到关键帧结束结束。

定义于一个关键帧区块的缓动函数(animation timing function)应用到改关键帧；另外，若该关键帧没有定义缓动函数，则使用定义于整个动画的缓动函数。

示例

/* keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
animation-timing-function: frames(10);

/* multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;

浏览器支持


IE10以上版本的浏览器都支持`animation-timing-function`

语法

animation-timing-function:<timingfunction>

取值

<timingfunction>：每个<timing-function>代表了应用于动画的timing function，定义于animation-property.
<timing-function>= linear |<cubic-bezier-timing-function>|<step-timing-function>
<cubic-bezier-timing-function>= ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,<number>,<number>,<number>)
<step-timing-function>= step-start | step-end | steps(<integer>[,<step-position>]?)
<step-position>= jump-start | jump-end | jump-none | jump-both | start | end

取值：

linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start：等同于 steps(1, start)
step-end：等同于 steps(1, end)。steps(<integer>[,[ start | end ]]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(<number>,<number>,<number>,<number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

说明：

检索或设置对象动画的过渡类型

如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为animationTimingFunction。
在一些场景中会有错误行为
部分浏览器不支持伪元素动画，或者支持得不够好，尽可能不要利用伪元素来做动画

默认值	ease
适用于	所有元素，包含伪对象`::before`and`::after`
继承性	无
动画性	否
计算值	指定值
媒体	交互

实例

<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>

效果图：