Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar CSS Bagian 58 : Cara Mendesain Checkbox Dengan CSS. Kali ini kita akan belajar membuat efek transisi dengan CSS transition.
CSS transition adalah efek yang ditambahkan untuk mengubah elemen secara bertahap dari satu gaya ke gaya lainnya, tanpa menggunakan flash atau JavaScript.
Anda harus menentukan 2 hal untuk membuat CSS transition.
- Properti CSS yang ingin Anda tambahkan efeknya.
- Durasi waktu efeknya.
Mari kita lihat contoh yang mendefinisikan efek transisi pada property width dan dengan durasi 3 detik.
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100px;
height: 100px;
background: orange;
-webkit-transition: width 1s; /* Untuk Safari 3.1 ke 6.0 */
transition: width 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div></div>
<p> Pindahkan kursor ke elemen div di atas, untuk melihat efek transisi.</p>
</body>
</html> Efek Multiple Transition CSS
Ini digunakan untuk menambahkan efek transisi pada lebih dari satu properti CSS. Jika Anda ingin menambahkan efek transisi pada lebih dari satu properti, pisahkan properti tersebut dengan koma.
Mari kita lihat contoh. Di sini, efek transisi pada widht, height, dan transformation.
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding:15px;
width: 150px;
height: 100px;
background: violet;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 200px;
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
</style>
</head>
<body>
<div><b>Mbahwp.com</b><p> (Gerakkan kursor Anda ke arah saya untuk melihat efeknya)</p></div>
</body>
</html> Semoga tutorial ini membantu Anda untuk memahami cara membuat efek transisi pada elemen menggunakan CSS transition.
