Manuwarin CSS animation-timing-function Attribute

تعريف والاستخدام

animation-timing-function تحديد سرعة منحنيات الحركة.

تعريف منحنيات السرعة التي تحدد الوقت المستغرق في تحويل مجموعة الأنماط CSS من مجموعة إلى أخرى.

منحنيات السرعة تستخدم لجعل التغيرات أكثر سلاسة.

يرجى الرجوع أيضًا إلى:

دليل CSS3Hausa CSS animation

دليل HTML DOMخصائص animationTimingFunction

مثال

مثال 1

عرض الحركة من البداية إلى النهاية بسرعة متساوية:

div
{
animation-timing-function:2s;
}

亲自试一试

مثال 2

للتفكير بشكل أفضل في القيم المختلفة للوظائف الزمنية، تم تقديم خمس عناصر 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;}

亲自试一试

مثال 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-