CSS transition-timing-function ominaisuus

Määrittely ja käyttö

transition-timing-function ominaisuus määrittelee siirtymäefektin nopeuskaaren.

Tämä ominaisuus mahdollistaa, että siirtymäefekti muuttuu ajan myötä.

Katso myös:

CSS opas:CSS siirtymä

HTML DOM -viittausopas:transitionTimingFunction ominaisuus

esimerkki

Esimerkki 1

Siirtymäefekti, jossa nopeus pysyy samana alusta loppuun:

div
{
transition-timing-function: linear;
}

Kokeile itse

CSS syntaksi

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

ominaisuusarvo

arvo kuvaus
linear Määritä siirtymäefekti, joka alkaa ja loppuu samalla vauhdilla (vastaa cubic-bezier(0,0,1,1)).
ease Määritä siirtymäefekti, joka alkaa hitaasti, kiihtyy ja loppuu jälleen hitaasti (cubic-bezier(0.25,0.1,0.25,1)).
ease-in Määritä hitaasti alkava siirtymäefekti (vastaa cubic-bezier(0.42,0,1,1)).
ease-out Määritä hitaasti loppuva siirtymäefekti (vastaa cubic-bezier(0,0,0.58,1)).
ease-in-out Määritä hitaasti alkava ja loppuva siirtymäefekti (vastaa cubic-bezier(0.42,0,0.58,1)).
cubic-bezier(n,n,n,n) Määritä oma arvosi cubic-bezier-funktiolle. Mahdolliset arvot ovat välillä 0-1.

Vinkki:Kokeile eri arvoja esimerkeissä, niin voit ymmärtää paremmin niiden toimintaperiaatteen.

Tekninen yksityiskohta

Oletusarvo: ease
Perinnäisyys: ei
Versio: CSS3
JavaScript-kieli: objekti.style.transitionTimingFunction="linear"

Lisää esimerkkejä

Esimerkki 2

Jotta voit ymmärtää paremmin eri funktioiden arvot, katso seuraavat viisi eri div-elementtiä, joissa on viisi eri arvoa:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Kokeile itse

Esimerkki 3

Kuten edellisessä esimerkissä, mutta nopeuskaari määritetään cubic-bezier:llä:

#div1 {transition-timing-function: cubic-bezier(0,0,1,1);}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

Kokeile itse

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee kyseistä ominaisuutta täysin.

Numerot, jotka sisältävät -webkit-, -moz- tai -o- etuliitteet, viittaavat ensimmäiseen versioon, jota etuliite käytetään.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-