Atributo ng animation-timing-function ng CSS

Definition and Usage

animation-timing-function Tukuyin ang kurba ng bilis ng animation.

Ang mga kurba ng bilis ay tinukoy ang oras na ginagamit ng animation para maging mula sa isang CSS style hanggang sa isa pang CSS style.

Ang mga kurba ng bilis ay ginagamit upang palawakin ang pagbabago sa mas mahinahon na paraan.

Mga ibang basahin:

CSS3 Tutorial:CSS 动画

HTML DOM Reference Manual:Attribute na animationTimingFunction

实例

实例 1

I-play ang animation mula sa simula hanggang sa katapusan sa parehong bilis:

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

Try It Yourself

实例 2

Para mas mabuti na maunawaan ang iba't ibang halaga ng timing function, ibinigay dito ang limang iba't ibang div element na may limang iba't ibang halaga:

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

Try It Yourself

实例 3

Katulad ng nakaraang halimbawa, ngunit naglalayong gumamit ng cubic-bezier function upang tanggapin ang kurva ng bilis:

#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);}

Try It Yourself

Syntax ng CSS

animation-timing-function: value;

Ang animation-timing-function ay gumagamit ng matematikal na function na tinatawag na Cubic Bezier function upang lumikha ng kurva ng bilis. Maaari mong gamitin ang sarili mong halaga, o ang predefinidong halaga:

Halaga Paglalarawan Test
linear Ang bilis ng animation ay parehong katulad mula sa simula hanggang sa katapusan. Test
ease Default. Ang animation ay nagsisimula sa mababang bilis, pagkatapos ay nagpabilis, at lumalabas sa katapusan. Test
ease-in Ang animation ay nagsisimula sa mababang bilis. Test
ease-out Ang animation ay nagtatapos sa mababang bilis. Test
ease-in-out Ang animation ay nagsisimula at nagtatapos sa mababang bilis. Test
cubic-bezier(n,n,n,n) Ang mga halaga sa cubic-bezier function. Ang posibleng halaga ay ang mga numero mula 0 hanggang 1.

Mga Payo:Sinubukan mong gamitin ang iba't ibang halaga sa 'Try It Yourself' na function sa ibaba.

Detalye ng Teknolohiya

Default Value: ease
Inheritsibility: no
Bersyon: CSS3
Syntax ng JavaScript: object.style.animationTimingFunction="linear"

Suporta ng Browser

Ang mga numero sa talahanayan ay naglalarawan ng kauna-unahang bersyon ng browser na ganap na sumusuporta sa katangian.

Mga numero na may -webkit-、-moz- o -o- ay naglalarawan ng unang bersyon na gumagamit ng prefix.

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-