Penggunaan Timing Function Pada Transition CSS3

16/09/2016    Agustinus    1124     Website

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.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More