animation-timing-function

版本： CSS3

CSS animation-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;

浏览器支持

IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
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>

效果图：

上篇： animation-duration

下篇： animation-delay