CSS transition-timing-function 属性

CSS 属性受到 transition effect的影响，会产生不断变化的中间值，而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变。

实例

以相同的速度从开始到结束的过渡效果：

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
transition-timing-function:linear;
/* Firefox 4 */
-moz-transition:width 2s;
-moz-transition-timing-function:linear;
/* Safari and Chrome */
-webkit-transition:width 2s;
-webkit-transition-timing-function:linear;
/* Opera */
-o-transition:width 2s;
-o-transition-timing-function:linear;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>

运行一下

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit-、-moz- 或 -o- 的数字表示使用前缀的首个版本。

属性
transition-timing-function	26.04.0 -webkit-	10.0	16.04.0 -moz-	6.13.1 -webkit-	12.110.5 -o-

定义和用法

transition-timing-function 属性规定过渡效果的速度曲线。

该属性允许过渡效果随着时间来改变其速度。

可以规定多个 timing function ,通过使用 transition-property 属性，可以根据主列表( transition property 的列表)给每个CSS属性应用相应的 timing function 。如果 timing function 的个数比主列表中数量少，缺少的值被设置为初始值（ease）。如果 timing function 比主列表要多，timing function 函数列表会被截断至合适的大小。这两种情况下声明的CSS属性都是有效的。

默认值：	ease
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.transitionTimingFunction="linear"

语法

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
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;
  transition: width 2s;
}
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
div:hover {
  width: 300px;
}
</style>
</head>
<body>
<h2>transition-timing-function 属性</h2>
<p><b>备注:</b> 此示例在 Internet Explorer 9 和早期版本中不起作用。</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>
<p>将鼠标悬停在上面的div元素上，以查看不同的过渡效果。</p>
</body>
</html>

运行一下

实例 2

与上例相同，但通过 cubic-bezier 来规定速度曲线：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 50px;
  background: red;
  color: white;
  font-weight: bold;
  transition: width 2s;
}
#div1 {transition-timing-function: cubic-bezier(0,0,1,1);}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
div:hover {
  width: 300px;
}
</style>
</head>
<body>
<h2>transition-timing-function 属性</h2>
<p><b>备注:</b> 此示例在 Internet Explorer 9 和早期版本中不起作用。</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>
<p>将鼠标悬停在上面的div元素上，以查看不同的过渡效果。</p>
</body>
</html>

运行一下

CSS transition-timing-function 属性

实例

浏览器支持

定义和用法

语法

- 实例

实例 1

实例 2

分类导航