Tutorial CSS3 properti transisi-waktu-fungsi Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari contoh,Dukungan Browser,Definisi atribut dan petunjuk,tatabahasa,contoh yang lebih,contoh,contoh,
Transisi pada kecepatan yang sama dari awal sampai akhir:
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- |
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" |
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!
Untuk lebih memahami fungsi nilai yang berbeda: Ada lima elemen div yang berbeda, dengan lima nilai yang berbeda:
Dan contoh di atas, tetapi menentukan kurva kecepatan fungsi Bezier kubik: