Transisi-waktu-fungsi - Trik CSS

The transition-timing-functionproperti, biasanya digunakan sebagai bagian dari transitionsingkatan, digunakan untuk mendefinisikan fungsi yang menggambarkan bagaimana transisi akan melanjutkan lebih durasinya, yang memungkinkan transisi ke kecepatan perubahan selama perjalanannya.

.example ( transition-timing-function: ease-out; )

Fungsi pengaturan waktu ini biasanya disebut fungsi easing, dan dapat ditentukan menggunakan nilai kata kunci yang telah ditentukan sebelumnya, fungsi loncatan, atau kurva Bézier kubik.

Nilai kata kunci standar yang diperbolehkan adalah:

meredakan
linier
kemudahan-masuk
santai
kemudahan-masuk-keluar
langkah-mulai
step-end

Untuk beberapa nilai, efeknya mungkin tidak begitu jelas kecuali durasi transisi disetel ke nilai yang lebih besar.

Setiap kata kunci yang telah ditentukan sebelumnya memiliki nilai kurva Bézier kubik yang setara atau nilai fungsi loncatan yang setara. Misalnya, dua nilai fungsi pengaturan waktu berikut akan sama satu sama lain:

.example ( transition-timing-function: ease-out; ) .example-2 ( transition-timing-function: cubic-bezier(0, 0, 0.58, 1); )

Seperti dua hal berikut ini:

.example ( transition-timing-function: step-start; ) .example-2 ( transition-timing-function: steps(1, start); )

Menggunakan langkah-langkah () dan kurva Bézier

The steps()Fungsi memungkinkan Anda untuk menentukan interval untuk fungsi waktu. Dibutuhkan satu atau dua parameter, dipisahkan dengan koma: bilangan bulat positif dan nilai opsional salah satu startatau end. Jika tidak ada parameter kedua yang disertakan, maka defaultnya adalah end.

Untuk memahami fungsi melangkah, berikut adalah demo yang digunakan steps(4, start)untuk kotak di kiri, dan steps(4, end)untuk kotak di kanan (arahkan kursor ke kotak atau muat ulang bingkai untuk melihat transisi):

Lihat Pena ini!

Ketika startditentukan, perubahan nilai terjadi di awal setiap interval, sementara endmenyebabkan perubahan nilai terjadi di akhir setiap interval.

Tampilan mendetail pada nilai kurva Bézier berada di luar cakupan referensi ini, namun lihat referensi di bagian tautan terkait untuk alat yang menunjukkan secara visual bagaimana nilai-nilai ini bekerja.

Untuk kompatibilitas di semua browser pendukung, prefiks vendor diperlukan, dengan sintaks standar yang dideklarasikan terakhir:

.example ( -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; )

IE10 (versi stabil IE pertama yang mendukung transition-timing-function) tidak memerlukan -ms-awalan.