Memberikan Nilai Durasi Transition Pada CSS3

Pada artikel sebelumnya kita sudah bahas konsep dasar dari property transition dan animation Selanjutnya kita akan lihat bentuk penulisan sintaks sederhana pada property CSS3 yaitu transition dimana property ini mempunyai empat buah parameter yang bisa teman teman tulis

dari keempat parameter tersebut ada satu parameter yang wajib kita tulis yaitu <durasi> dan parameter yang tiga sisanya itu sebagai opsional artinya teman teman boleh tulis atau boleh juga tidak. Pertama kita akan lihat penggunaan parameter yang wajib yaitu durasi. Durasi itu kita bisa isi dengan angka dan angka tersebut mempunyai satuan yang bisa kita berikan s untuk second atau ms untuk milisecond. Jadi durasi ini artinya pada saat teman teman merubah nilai dari property HTML dari keadaan awal ke keadaan akhir durasinya mau berapa lama. Berikut ini sintaks HTML yang saya sudah buat

yang didalamnya terdapat elemen div yang punya class box dan saya akan berikan style untuk lebar 100px tinggi 100px dan ada backgroundnya

maka kita tampilkan kebrowser hasilnya akan seperti ini

nah itu yang kita sebut sebagai keadaan awalnya dimana keadaan akhirnya kita simpan dalam keadaan hover. Ketika dihover saya ingin buat keadaan akhirnya merotasi sebanyak 180 derajat.

dan jika dilihat hasilnya itu kelihatan tidak terjadi apa-apa padahal kotaknya sebenarnya sudah berputar 180 derajat. 180 derajat itu posisinya kembali seperti semula. Tapi karena perpindahan dari keadaan awal ke keadaan akhirnya instan jadi kita tidak bisa melihat perubahannya nah supaya kita dapat melihat perubahannya kita harus tambahkan transition supaya perpindahannya halus.

Simpan property transition selalu dalam keadaan awal dan untuk durasi dari transisinya saya berikan 1 detik. Kita lihat hasilnya maka ketika mousenya diarahkan kita dapat melihat perubahan atau pergerakkan transisinya berputar sebanyak 180 derajat. Itu dia cara penggunaan simple untuk property transistion.

10 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 Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat