Atribut animation-timing-function CSS

Definisi dan penggunaan

fungsi-waktu-animasi Tentukan garis kecepatan animasi.

Garis kecepatan mendefinisikan waktu yang digunakan untuk animasi berubah dari satu gaya CSS ke yang lain.

Garis kecepatan digunakan untuk membuat perubahan lebih lancar.

Lihat pula:

Pelajaran CSS3:Animasi CSS

Panduan HTML DOM:Properti animationTimingFunction

Contoh

Contoh 1

Memainkan animasi dengan kecepatan yang sama dari awal hingga akhir:

div
{
fungsi-waktu-animasi:2s;
}

亲自试一试

Contoh 2

Untuk memahami lebih baik nilai fungsi waktu yang berbeda, disediakan lima elemen div dengan lima nilai yang berbeda:

#div1 {fungsi-waktu-animasi: linear;}
#div2 {fungsi-waktu-animasi: ease;}
#div3 {fungsi-waktu-animasi: ease-in;}
#div4 {fungsi-waktu-animasi: ease-out;}
#div5 {fungsi-waktu-animasi: ease-in-out;}

亲自试一试

Contoh 3

与上例相同，但是通过 cubic-bezier 函数来定义速度曲线：

#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 语法

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 的数值。

提示：请尝试在下面的“亲自试一试”功能中使用不同的值。

技术细节

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

浏览器支持

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
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-