Assalamualaikum Wr. Wb.
Sahabat Webhozz dimanapun berada, gimana kabarnya nih???
Semoga sehat selalu dan bahagia ya, amin.
Nah, kali ini kita akan belajar mengenai Transisi pada CSS.
Transisi itu apa sih?
Transisi itu adalah perubahan objek. Misalkan saat kita arahkan mouse ke suatu elemen di web, maka akan ada perubahan warna. Bukan hanya warna aja, bahkan ada perubahan ukuran dari elemen itu juga.
Bukan juga saat mouse diarahkan, tapi bisa aja saat klik dan lain sebagainya even-even yang biasa kita lakukan saat mengunjungi sebuah website.
Jika tanpa efek transisi, perubahan yang terjadi terlihat biasa aja.
Tapi jika kita tambahkan efek transisi, perubahan yang terjadi
- Buat dulu file html, lalu ketikkan kode berikut.
//========================= <!DOCTYPE html> <html> <head> <title>Efek Transisi</title> </head> <body> <h2>Efek Transisi</h2> <div></div> </body> </html> //=========================
2. Lalu ketikkan kode css berikut ini pada tag <head>
//=========================
<style type="text/css">
div
{
width: 100px;
height: 100px;
background-color: crimson;
}
</style>
//========================
3. Maka akan tampil gambar seperti ini.
4. Nah, selanjutnya tambahkan efek selector baru untuk pergantian warna seperti berikut ini.
//========================
div:hover
{
background-color: dodgerblue;
transition-duration: 2s;
}
//========================
5. Maka beginilah kode secara keseluruhan.
//========================
<!DOCTYPE html>
<html>
<head>
<title>Efek Transisi</title>
<style type="text/css">
div
{
width: 100px;
height: 100px;
background-color: crimson;
}
div:hover
{
background-color: dodgerblue;
transition-duration: 2s;
}
</style>
</head>
<body>
<h2>Efek Transisi</h2>
<div></div>
</body>
</html>
//========================
6. Maka akan tampil seperti ini
Nah, mudah kan???
Oke yang terjadi pada gambar di atas pada langkah 6 adalah perubahan warna secara perlahan dari warna merah crimson ke warna biru doger.
Itu adalah efek dari kode css “transition-duration: 2s;”
Fungsinya untuk memberikan efek transaksi. Adapun “transition-duration:”, adalah properti untuk memberikan efek transisi. Sedangkan valuenya ada “2s”. Nah, itu untuk lama durasi dari efek transisi.
2s, 2 second dan itu berarti 2 detik. Artinya lama efek transisinya adalah 2 detik. Semakin besar detik yang diberikan, maka selama detik itu juga transisinya.
Oke, sisanya silahkan teman-teman coba sendirinya.
Demikianlah postingan kali ini, semoga bermanfaat ya.
