ဟယ်လ် animation-timing-function အချက်အလက်

အသုံးပြုခြင်း နှင့် အကျိုးသမား

animation-timing-function အသွားအကွာ အရိုက်များ ကို အစားထိုးမှုများ ကြောင်း ဖော်ပြခြင်း

အသွားအကွာ အရိုက်များ အသုံးပြုခြင်း နှင့် အသုံးပြုခြင်း အချက်အလက်များ

အသွားအကွာ များပြားစွာ ဖြင့် ပြောင်းလဲမှုများကို ပြောင်းလဲမှုများကို လွယ်ကူစွာ လွယ်ကူစွာ ပြောင်းလဲစေရန် အသွားအကွာ အရိုက်များ အသုံးပြုကြသည်。

တကယ်သဘောပြုလုပ်မည်ကို ကြည့်ပါ：

CSS3 ပြည့်ရိုးကျမ်း：စီစ်အုပ်စု အင်တော်လျှံ

HTML DOM ပြည့်ရိုးကျမ်း：animationTimingFunction အရိုက်

နည်းပါး

နည်းပါး 1

အစားထိုးမှုများကို စတင်ခြင်းမှ အဆုံးခြင်းအထိ အချိန်တူတူသော အချိန်ရပ်ကွက် ဖြင့် အစားထိုးမှုများကို ကြည့်ရှုရန်：

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

亲自试一试

နည်းပါး 2

မည်သည့်အချိန်မျှသော အချိန်တူတူသော အချိန်ရပ်ကွက် သုံးသပ်ခြင်းကို ကောင်းမွန်စွာ သိနိုင်ရန် အချိန်ရပ်ကွက် အချိန်တူတူသော အချိန်ရပ်ကွက် အချိန်တူတူသော အချိန်ရပ်ကွက် အချိန်တူတူသော အချိန်ရပ်ကွက် စံပုံ ၅ ခု ကို ပြထားသည်：

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