Halo teman-teman, berjumpa lagi di tutorial dumet school. Kali ini saya akan membahas tentang property CSS3 yaitu transition. Transition digunakan untuk membuat afek animasi pada sebuah object. Contoh sederhananya sekarang kita akan buat efek sederhananya. Coba teman-teman ketikkan baris di bawah ini :

 

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 50px;

background: blue;

color:#ffffff;

padding: 10px;

-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */

transition: width 2s;

}

 

div:hover {

width: 300px;

}

</style>

</head>

<body>

 

<div> Letakkan Mouse Disini</div>

 

</body>

</html>

 

Coba teman-teman save dan buka pada browser. Untuk transitionnya bernilai 2s itu adalah waktu delaynya bisa teman-teman coba ganti nilainya. Oke demikian sedikit dari saya. Tetap semangat dan sampai jumpa di tutorial selanjutnya…

WhatsApp chat