Perbedaan antara kemudahan-masuk dan kemudahan-keluar transisi CSS3

Apa perbedaan antara CSS3 transisi ease-in, ease-out, dll?

Transisi dan animasi CSS3 mendukung easing, yang secara formal disebut "fungsi pengaturan waktu". Yang umum adalah ease-in, ease-out, ease-in-out, ease, dan linear, atau Anda dapat menentukan sendiri menggunakan cubic-bezier().

• ease-in akan memulai animasi secara perlahan, dan selesai dengan kecepatan penuh.
• ease-out akan memulai animasi dengan kecepatan penuh, lalu menyelesaikannya secara perlahan.
• ease-in-out akan dimulai dengan lambat, menjadi yang tercepat di tengah animasi, lalu selesaikan secara perlahan.
• easeseperti ease-in-out, kecuali ini dimulai sedikit lebih cepat dari pada akhirnya.
• linear tidak menggunakan pelonggaran.
• Akhirnya, inilah gambaran besar dari cubic-beziersintaks, tapi biasanya tidak diperlukan kecuali jika Anda ingin beberapa efek yang sangat tepat.

Pada dasarnya, melonggarkan berarti memperlambat hingga berhenti, melonggarkan berarti mempercepat secara perlahan, dan linier berarti tidak melakukan keduanya. Anda dapat menemukan sumber daya yang lebih rinci di dokumentasi untuk timing-functiondi MDN .

Dan jika Anda memang menginginkan efek presisi yang disebutkan di atas, cubic-bezier.com Lea Verou yang menakjubkan siap membantu Anda! Ini juga berguna untuk membandingkan fungsi pengaturan waktu yang berbeda secara grafis.

Lain, yang steps()fungsi waktu , bertindak seperti linear, tetapi hanya melakukan jumlah terbatas langkah antara awal transisi dan akhir. steps()paling berguna bagi saya dalam animasi CSS3, bukan dalam transisi; contoh yang baik adalah memuat indikator dengan titik. Secara tradisional, seseorang menggunakan serangkaian gambar statis (katakanlah delapan titik, dua warna berubah setiap frame) untuk menghasilkan ilusi gerakan. Dengan steps(8)animasi dan rotatetransformasi, Anda menggunakan gerakan untuk menghasilkan ilusi bingkai terpisah! Menyenangkan sekali.