Fungsi peralihan-masa - Trik CSS

Properti transition-timing-functionini, biasanya digunakan sebagai bagian dari transitionsingkatan, digunakan untuk menentukan fungsi yang menjelaskan bagaimana peralihan akan berlangsung selama jangka masa yang panjang, yang memungkinkan peralihan untuk mengubah kelajuan selama perjalanannya.

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

Fungsi pemasaan ini biasanya disebut fungsi pelonggaran, dan dapat didefinisikan menggunakan nilai kata kunci yang telah ditentukan, fungsi melangkah, atau kurva Bézier kubik.

Nilai kata kunci yang telah ditentukan yang dibenarkan adalah:

kemudahan
linear
kemudahan
kemudahan
kemudahan dalam keluar
langkah awal
langkah akhir

Untuk beberapa nilai, kesannya mungkin tidak begitu jelas kecuali tempoh peralihan ditetapkan ke nilai yang lebih besar.

Setiap kata kunci yang telah ditentukan mempunyai nilai lengkung Bézier kubik setara atau nilai fungsi langkah setara. Sebagai contoh, dua nilai fungsi masa berikut adalah setara antara satu sama lain:

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

Seperti dua perkara berikut:

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

Menggunakan lengkung langkah () dan Bézier

Yang steps()fungsi membolehkan anda untuk menentukan jarak untuk fungsi masa. Ia memerlukan satu atau dua parameter, dipisahkan dengan koma: bilangan bulat positif dan nilai pilihan sama ada startatau end. Sekiranya tidak ada parameter kedua yang disertakan, ia akan menjadi default end.

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

Lihat Pen ini!

Apabila startditentukan, perubahan nilai berlaku pada permulaan setiap selang waktu, sementara endmenyebabkan perubahan nilai terjadi pada akhir setiap selang.

Pandangan terperinci mengenai nilai kurva Bézier berada di luar ruang lingkup rujukan ini, namun lihat rujukan di bahagian pautan yang berkaitan untuk alat yang menunjukkan secara visual bagaimana nilai-nilai ini berfungsi.

Untuk keserasian dalam semua penyemak imbas yang menyokong, awalan vendor diperlukan, dengan sintaks standard yang dinyatakan 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 pertama IE yang disokong transition-timing-function) tidak memerlukan -ms-awalan.