CSS3 Transition
Transisi CSS3 memungkinkan kita untuk mengontrol kecepatan animasi saat mengubah properti CSS.
Transisi CSS3 dapat menyebabkan perubahan pada properti yang ditentukan berlangsung selama periode waktu tertentu, alih-alih hanya berlangsung segera.
Kita dapat menunjukkan bagaimana transisi bekerja dengan : hover.
css
.tanpa-transisi {
width: 100px;
height: 100px;
background: black;
}
.dengan-transisi {
width: 100px;
height: 100px;
background: black;
transition-property: width;
transition-duration: 2s;
}
div:hover {
width: 100%;
}
html
**tanpa transisi**
<div class="tanpa-transisi"></div>
dengan transisi
<div class="dengan-transisi"></div>
Ketuk pada Kotak warna pink untuk melihat cara kerja CSS3 ini.
tanpa transisi
dengan transisi
CSS3 Transition Property and Duration
transition-property
css
transition-property: width;
Properti CSS menentukan nama properti untuk efek transisi.
transition-duration
css
transition-duration: 2s;
Properti CSS menetapkan berapa banyak waktu transisi harus diselesaikan.
Contoh:
css
.durasi-transisi {
width: 100px;
height: 100px;
background: pink;
transition-property: width;
transition-duration: 5s; /* ini adalah durasi 5 detik*/
transition-delay: .5s;
}
div:hover {
width: 100%;
}
html
<div class="durasi-transisi"></div>
Ketuk pada Kotak warna pink untuk melihat cara kerja CSS3 ini.
Durasi 1 detik
Durasi 5 detik
Durasi 10 detik
CSS3 Transition background color
transition-property
Tambahkan background didalam transition-property
css
transition-property: width, background;
css
.bg-color-transisi {
width: 100px;
height: 100px;
background-color: pink;
transition-property: width, background;
transition-duration: 5s;
transition-delay: .5s;
}
div:hover {
width: 100%;
background-color: navy;
}
html
<div class="bg-color-transisi"></div>
Ketuk pada Kotak warna pink untuk melihat cara kerja CSS3 ini.
Pink to navy
----