Membuat animasi perubahan warna dengan menggunakan css merupakan hal yang cukup menarik untuk ditambahkan didalam website yang kita buat. Contohnya adalah animasi perubahan warna text, background, ataupun menu ketika kita mensorot (hover) elemen tersebut.
Animasi perubahan warna ini termasuk kedalam basic dari 2D (dua dimensi) transisi transisi dan juga transformasi sederhana didalam CSS.
Anggaplah disini kita telah memiliki menu link dengan css efek hover biasa seperti dibawah ini:
css:
ul.menu{
margin: 0;
padding: 0;
list-style-type:none; width:200px;
border:1px solid #0000ff;
}
a{
text-decoration: none;
padding:10px;
display:block;
color:#0000ff;
}
a:hover{
color:white;
background-color:rgba(0,0,255,.6);
}
html
<ul class="menu">
<li><a href="#" target="_blank">Komputerisasi Dasar</a></li>
<li><a href="#" target="_blank">Multimedia</a></li>
<li><a href="#" target="_blank">Web Development</a></li>
</ul>
Cat: saya gunakan color rgba agar dapat sekalian menambahkan nilai opacity efek pada background hovernya.
Selanjutnya kita tambahkan skrip transisi pada elemen a (link) sehingga menjadi seperti dibawah ini:
a{
text-decoration: none;
padding:10px;
display:block;
color:#0000ff;
-webkit-transition: background-color .75s ease; //untuk chrome & safari
-moz-transition: background-color .75s ease; //untuk mozilla
-0-transition: background-color .75s ease; //untuk Opera
transition: background-color .75s ease; //untuk CSS3
}
Penjelasan: Komponen syntax dari css properti transition terdiri dari properti css, waktu durasi transisi, fungsi/efek transisi, dan delay.
transition: property duration timing-function delay;
Jika kita perhatikan efek transisi pada background sudah muncul ketika kita menempatkan kursor pada menu yang telah kita buat, agar efek transisi lebih halus lagi, kita dapat menambahakan efek transisi untuk property hover colornya. sehingga property css untuk elemen a menjadi seperti ini:
a{
text-decoration: none;
padding:10px;
display:block;
color:#0000ff;
-webkit-transition: background-color .75s ease, color .50s ease;
-moz-transition: background-color .75s ease, color .50s ease;
-0-transition: background-color .75s ease, color .50s ease;
transition: background-color .75s ease, color .50s ease;
}
Untuk menambahkan efek transisi pada properti css lain didalam css transition kita dapat memisahkannya dengan tanda koma pada setiap akhir efek transisinya.
Cat: properti transisi pada css tidak akan bekerja pada browser internet explore 9 kebawah.
) sehingga selalu ingin komputernya menggunakan software-software up to date juga.
”