码农教程 - 一技在手,衣食无忧! tools

目录

CSS animation-timing-function 属性

❮上一节 完整的CSS参考 下一节❯

示例

从头到尾以相同的速度播放动画：

div {
  animation-timing-function: linear;
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个animation-timing-function指定动画的速度曲线。

速度曲线定义动画从一组 CSS 样式更改为另一组 CSS 样式所用的时间。

利用速度曲线使变化平滑。

默认值： 舒适
遗传： 不
可动画： 不。阅读可动画的
版本： CSS3
JavaScript 语法： 对象.style.animationTimingFunction="linear"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

后跟 -webkit-、-moz- 或 -o- 的数字指定使用前缀的第一个版本。

Property
animation-timing-function 43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-

CSS 语法

animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier( n, n, n, n)|initial|inherit;

动画计时函数使用称为三次贝塞尔曲线的数学函数来制作速度曲线。您可以在此函数中使用自己的值，或使用预定义的值之一：

属性值

Value Description Demo
linear The animation has the same speed from start to end Play it »
ease Default value. The animation has a slow start, then fast, before it ends slowly Play it »
ease-in The animation has a slow start Play it »
ease-out The animation has a slow end Play it »
ease-in-out The animation has both a slow start and a slow end Play it »
step-start Equivalent to steps(1, start)
step-end Equivalent to steps(1, end)
steps(int,start|end) Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "end"
cubic-bezier(n,n,n,n) Define your own values in the cubic-bezier function
Possible values are numeric values from 0 to 1
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

提示：尝试下面"More Examples" 部分中的不同值。

更多示例

示例

为了更好地理解不同的计时函数值；
以下是具有五个不同值的五个不同的 <div> 元素：

#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;}
亲自试一试 »

示例

与上面的示例相同，但速度曲线是使用三次贝塞尔函数定义的：

#div1 {animation-timing-function: cubic-bezier(0,0,1,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);}
亲自试一试 »

相关页面

CSS教程：CSS 动画

HTML DOM 参考：AnimationTimingFunction 属性


❮上一节 完整的CSS参考 下一节❯