CSS animation-timing-function 属性
CSS animation-timing-function 属性定义CSS动画在每一动画周期中执行的节奏。可能值为一或多个 <timing-function>。
对于关键帧动画来说，timing function 作用于一个关键帧周期而非整个动画周期，即从关键帧开始开始，到关键帧结束结束。
定义于一个关键帧区块的缓动函数(animation timing function)应用到改关键帧；另外，若该关键帧没有定义缓动函数，则使用定义于整个动画的缓动函数。
实例
从开头到结尾以相同的速度来播放动画：
<!DOCTYPE html><html><head><style>div{width:100px;height:100px;background:red;position:relative;animation:mymove 5s infinite;animation-timing-function:linear;/* Safari and Chrome */-webkit-animation:mymove 5s infinite;-webkit-animation-timing-function:linear;}@keyframes mymove{from {left:0px;}to {left:200px;}}@-webkit-keyframes mymove /* Safari and Chrome */{from {left:0px;}to {left:200px;}}</style></head><body><p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-timing-function 属性。</p><div></div></body></html>
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
带 -webkit-、-moz- 或 -o- 的数字表示使用前缀的首个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| animation-timing-function | 43.04.0 -webkit- | 10.0 | 16.05.0 -moz- | 9.04.0 -webkit- | 30.015.0 -webkit-12.0 -o- |
定义和用法
animation-timing-function 规定动画的速度曲线。
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
速度曲线用于使变化更为平滑。
| 默认值： | ease |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.animationTimingFunction="linear" |
语法
animation-timing-function: value;
animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：
| 值 | 描述 | 测试 |
|---|---|---|
| linear | 动画从头到尾的速度是相同的。 | 测试 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 | 测试 |
| ease-in | 动画以低速开始。 | 测试 |
| ease-out | 动画以低速结束。 | 测试 |
| ease-in-out | 动画以低速开始和结束。 | 测试 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 | 测试 |
提示：请试着在下面的 实例 中使用不同的值。
实例 1
为了更好地理解不同的定时函数值，这里提供了设置五个不同值的五个不同的 div 元素：
<!DOCTYPE html><html><head><style>div{width:100px;height:50px;background:red;color:white;font-weight:bold;position:relative;animation:mymove 5s infinite;-webkit-animation:mymove 5s infinite; /* Safari and Chrome */}#div1 {animation-timing-function:linear;}#div2 {animation-timing-function:ease;}#div3 {animation-timing-function:ease-in;}#div4 {animation-timing-function:ease-out;}#div5 {animation-timing-function:ease-in-out;}/* Safari and Chrome: */#div1 {-webkit-animation-timing-function:linear;}#div2 {-webkit-animation-timing-function:ease;}#div3 {-webkit-animation-timing-function:ease-in;}#div4 {-webkit-animation-timing-function:ease-out;}#div5 {-webkit-animation-timing-function:ease-in-out;}@keyframes mymove{from {left:0px;}to {left:300px;}}@-webkit-keyframes mymove /* Safari and Chrome */{from {left:0px;}to {left:300px;}}</style></head><body><p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-timing-function 属性。</p><div id="div1">linear</div><div id="div2">ease</div><div id="div3">ease-in</div><div id="div4">ease-out</div><div id="div5">ease-in-out</div></body></html>
实例 2
与上例相同，但是通过 cubic-bezier 函数来定义速度曲线：
<!DOCTYPE html><html><head><style>div{width:100px;height:50px;background:red;color:white;font-weight:bold;position:relative;animation:mymove 5s infinite;-webkit-animation:mymove 5s infinite; /* Safari and Chrome */}#div1 {animation-timing-function:cubic-bezier(0,0,0.25,1);}#div2 {animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}#div3 {animation-timing-function:cubic-bezier(0.42,0,1,1);}#div4 {animation-timing-function:cubic-bezier(0,0,0.58,1);}#div5 {animation-timing-function:cubic-bezier(0.42,0,0.58,1);}/* Safari and Chrome: */#div1 {-webkit-animation-timing-function:cubic-bezier(0,0,1,1);}#div2 {-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}#div3 {-webkit-animation-timing-function:cubic-bezier(0.42,0,1,1);}#div4 {-webkit-animation-timing-function:cubic-bezier(0,0,0.58,1);}#div5 {-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);}@keyframes mymove{from {left:0px;}to {left:300px;}}@-webkit-keyframes mymove /* Safari and Chrome */{from {left:0px;}to {left:300px;}}</style></head><body><p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-timing-function 属性。</p><div id="div1">linear</div><div id="div2">ease</div><div id="div3">ease-in</div><div id="div4">ease-out</div><div id="div5">ease-in-out</div></body></html>
相关页面
CSS3 教程：CSS3 动画