animation-timing-function

版本：CSS3

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

对于关键帧动画来说，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;

浏览器支持

语法

取值

• ：每个代表了应用于动画的timing function，定义于animation-property.
• = linear ||
• = ease | ease-in | ease-out | ease-in-out | cubic-bezier(,,,)
• = step-start | step-end | steps([,]?)
• = 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([,[ start | end ]]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
• cubic-bezier(,,,)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

说明：

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

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

实例

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

效果图：

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com