Mengenal Property Transition Pada CSS3

Mengenal Property Transition Pada CSS3 - CSS3 merupakan versi terbaru CSS, di versi ini terdapat fitur fitur yang menarik dan membuat web semakin indah. Terdapat banyak fitur pada CSS3 yang berfungsi untuk membuat efek animasi pada web. Salah satunya Transition. Transition adalah property yang berfungsi untuk memberikan efek animasi pada perubahan atau pergantian pada elemen html. Dengan tansition perubahan pada elemen html akan menjadi lebih lembut dan indah. Langsung saja berikut tutorialnya.

Siapkan Elemen HTML

<div></div>

Disini saya memiliki sebuah kotak berwarna biru dengan lebar 200px, dan ketika mouse lewat/hover lebarnya berubah menjadi 400px. Nah saya ingin membuat animasi pada perubahan ukuran lebar, akan terlihat lebih indah.

Masukan Property Transition Di CSS

Berikut syntax dasarnya

transition: value yang mengalami perubahan kecepatan animasis;

CSS

div {

background-color: dodgerblue;
width: 200px;
transition: width 0.5s;

}
div:hover {

width: 400px;

}

Dan berikut hasilnya.

Penjelasan

• transition: width 0.5s
• width merupakan value yang mengalami perubahan
• 0.5s merupakan durasi atau kecepatan animasi

Itulah tutorial singkat mengenai transition dari saya, semoga bermanfaa.
Sekian postingan saya yang berjudul Mengenal Property Transition Pada CSS3.
Jangan lupa baca postingan saya sebelumnya Cara Mengubah Warna Placeholder Dengan CSS