Belajar CSS Part 22 : CSS3 Transisi

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 :

1. Properti CSS yang akan kita tambahkan efek
2. 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.

• Kesimpulan

Dengan menggunakan CSS3 kita bisa membuat efek transisi yang bagus.

Referensi :
http://www.w3schools.com/css/css3_transitions.asp

Wassalamu'alaikum Wr. Wb