Cara membuat efek animasi transisi menggunakan CSS3
Dengan CSS3 kita dapat membuat animasi transisi (transition animation )saat terjadi perubahan misalnya karena hover.
Property yang digunakan untuk animasi transisi ini adalah
- transition-property
Ini merupakan property elemen apa saja yang akan dianimasikan.
Untuk variasi penggunaan di browser menjadi -webkit-transition-property, -moz-transition-property dan -o-transition-property.
- transition-duration
Ini merupakan lamanya animasi akan dilakukan.
Untuk variasi penggunaan di browser menjadi -webkit-transition-duration, -moz-transition-duration dan -o-transition-duration.
- transition-timing-function
Ini merupakan cara animasi dilakukan
Untuk variasi penggunaan di browser menjadi -webkit-transition-timing-function, -moz-transition-timing-function dan -o-transition-timing-function.
- transition-delay
Ini merupakan delay sebelum animasi akan dilakukan.
Untuk variasi penggunaan di browser menjadi -webkit-transition-delay, -moz-transition-delay dan -o-transition-delay.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Animasi transisi</title>
<style type="text/css">
#kotak
{
width: 200px;
height: 200px;
background-color: green;
-webkit-transition-property: background-color;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: 250ms;
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
-moz-transition-timing-function: ease-out;
-moz-transition-delay: 250ms;
-o-transition-property: background-color;
-o-transition-duration: 2s;
-o-transition-timing-function: ease-out;
-o-transition-delay: 250ms;
}
#kotak:hover
{
background-color:red;
}
</style>
</head>
<body>
<div id="kotak">
</div>
</body>
</html>
Masih bingung ? coba tonton video berikut ini :
Untuk melihat hasilnya silahkan klik button demo berikut :
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment