CSS3 properti transisi-waktu-fungsi
contoh
Transisi pada kecepatan yang sama dari awal sampai akhir:
transition-timing-function: linear;
-webkit-transition-timing-function: linear; /* Safari and Chrome */
-webkit-transition-timing-function: linear; /* Safari and Chrome */
Coba »
Dukungan Browser
Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi properti.
Segera setelah -webkit- digital, -ms- atau moz lalu mendukung awalan atribut nomor versi browser pertama.
| 属性 | |||||
|---|---|---|---|---|---|
| transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Definisi atribut dan petunjuk
Properti transisi-waktu-fungsi menentukan kecepatan efek transisi.
Properti ini memungkinkan efek transisi untuk mengubah kecepatan durasinya.
| default: | memudahkan |
|---|---|
| warisan: | tidak |
| versi: | CSS3 |
| sintaks JavaScript: | keberatan .style.transitionTimingFunction = "linear" |
tatabahasa
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
| nilai | deskripsi |
|---|---|
| linear | Ketentuan pada kecepatan yang sama untuk memulai efek transisi berakhir (sama kubik-bezier (0,0,1,1)). |
| memudahkan | Penyediaan lambat awal, maka lebih cepat, maka lambat efek transisi akhir (kubik-bezier (0.25,0.1,0.25,1)). |
| kemudahan-in | ketentuan peralihan untuk efek awal yang lambat (sama dengan kubik-bezier (0.42,0,1,1)). |
| kemudahan-out | Ketentuan untuk akhir efek transisi lambat (setara kubik-bezier (0,0,0.58,1)). |
| kemudahan-in-out | ketentuan transisi berlaku mulai lambat dan berakhir (sama kubik-bezier (0.42,0,0.58,1)). |
| kubik-bezier (n, n,n, n) | Anda mendefinisikan nilai-nilai Anda sendiri dalam fungsi kubik-bezier. Kemungkinan nilai adalah angka antara 0-1. |
Tip: Coba nilai yang berbeda dalam contoh di bawah untuk memahami cara kerjanya!
contoh yang lebih
contoh
Untuk lebih memahami fungsi nilai yang berbeda: Ada lima elemen div yang berbeda, dengan lima nilai yang berbeda:
#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;}
/* Safari */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Safari */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
Coba »
contoh
Dan contoh di atas, tetapi menentukan kurva kecepatan fungsi Bezier kubik:
#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);}
/* Safari */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,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);}
/* Safari */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
Coba »
