Penggunaan Timing Function Pada Transition CSS3

Selanjutnya yang akan kita bahas adalah mengenai fungsi transisi. Parameter ini cukup menarik dimana kita bisa melihat perbedaan dari fungsi transisi apa yang bisa kita gunakan. Fungsi transisi ini disebut timing function. Jadi dengan timing function ini akan terjadi pergerakkan seperti apa yang teman teman lakukan pada saat menggunakan transisi. Ada beberapa nilai yang teman teman bisa berikan secara default nilai yang diberikan adalah ease, nilainya juga ada ease-in, ease-out, ease-in-out, linear dan yang terakhir yang cukup menarik adalah cubic-bezier. Kita akan mulai mencoba dan melihat perbedaan dari masing masing fungsi transisinya

ease-in ini awalnya akan pelan makin kesana makin cepat pergerakkannya. Dimana teman teman bisa mainkan dari masing masing fungsi transisinya mau seperti apa. Startnya akan sama yang akan membedakannya yaitu kecepatan awalnya dan kecepatan akhirnya. Ada satu lagi yang begitu menarik dan keren yakni cubic-bezier() dan ini akan berbeda dari timing function yang lain karena kita harus menambahkan empat parameternya. Maka dari kita itu kita bisa gunakan bantuan dari google chrome menggunakan inspect elemen

nanti teman teman lihat pada bagian CSSnya dimana kita bisa klik untuk melakukan editiing atau ubah kurvanya agar menghasilkan persamaan linear yang menentukan pergerakkan dari transisinya mau seperti apa.

Jika sudah menemukan kurva yang cocok teman teman bisa copy nilainya lalu simpan dan dijalankan. Hasilnya akan lebih menarik dari timing function yang lainnya. Oke itu timing function yang teman teman dapat gunakan. Selamat mencoba dan terima kasih.

16 September 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat