CSS3 TRANSISI
Assalamu'alaikum Wr. Wb
Hai sobat semua, terima kasih sudah mengunjungi blog saya. Pada kesempatan kali ini saya akan melanjutkan materi CSS3 selanjutnya yaitu tentang Transisi menggunakan CSS3.
Langsung saja yuk...
Untuk membuat efek transisi, kita harus menentukan 2 hal :
- Properti CSS yang akan kita tambahkan efek
- Durasi efek
Untuk menentukan kurva kecepatan transisi kita menggunakan properti transition-timing-function.
Properti transition-timing-function memiliki nilai sebagai berikut :
- ease => Menentukan efek transisi dengan awal yg lambat, kemudian cepat, kemudian berakhir dengan perlahan (default)
- linear => Menentukan efek transisi dengan kecepatan yang sama dari awal sampai akhir
- ease-in => Menentukan efek transisi dengan awal yang lambat
- ease-out => Menentukan efek transisi dengan ujung yg lambat
- ease-in-out => Menentukan efek transisi dengan awal yg lambat dan berakhir
- cubic-bezier(n,n,n,n) => Menentukan nilai kita sendiri dalam fungsi cubic-bezier
Contoh :
Hasilnya :
TRANSISI + TRANSFORMASI
Contoh :
Hasilnya :
Silakan dicoba sendiri sobat semua, apabila ada pertanyaan silakan tinggalkan jejak dikolom komentar. Terima kasih.
Dengan menggunakan CSS3 kita bisa membuat efek transisi yang bagus.
Referensi :
http://www.w3schools.com/css/css3_transitions.asp
Wassalamu'alaikum Wr. Wb