Tidak bosan-bosannya kita belajar css semoga kita bisa menjadi desainer web yang handal. Mau bagaimana pun cara belajar anda, belajarlah terus dan jangan pernah lelah. Semoga rasa lelah kita berbuah hasil. 

Transisi diartikan sebagai peralihan atau perubahan dari keadaan. Seiring dengan bertambahnya kemampuan css sekarang ini semakin banyak yang bisa kita buat, salah satunya transisi yang membuat tampilan lebih hidup. Kenapa hidup ? karena tampilan bisa merespon user dengan perubahan seperti bentuknya dan lain-lain.

Sederhananya transisi itu adalah cara membuat efek perubahan menggunakan css, dengan efek tersebut tampilan tampak hidup.

#file html
<!DOCTYPE html>
<html>
<head>
<title>Transisi</title>
<link rel="stylesheet" type="text/css" href="transisi.css">
</head>
<body>
<div class="box1"> Transisi lebar tanpa delay</div>
<div class="box2">Transisi lebar dengan delay satu detik</div>
<div class="box3">Transisi warna</div>
</body>
</html>


#file css (transisi.css)
.box1{
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;

}
.box1:hover{
width: 1300px;
}

.box2{
margin-top: 10px;
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;
transition-delay: 1s;

}
.box2:hover{
width: 1300px;
}


.box3{
width: 100px;
height: 100px;
margin-top: 10px;
background-color: red;
transition: background-color 2s;

}
.box3:hover{
background-color: green;
}
Efek transisi terjadi saat mouse diatas (hover) atau tap jika di perangkat mobile.

#tampilan

Transisi lebar tanpa delay
Transisi lebar dengan delay satu detik
Transisi warna

transition:poroperti waktu;
Pertama kita tentukan properti apa yang mau ditransisikan selanjutnya waktunya. Sekian tutorial kali ini terima kasih.
Tags

Post a Comment

Post a Comment

Previous Post Next Post