Agldcnet - cara membuat efek transisi tanpa JQuery atau java script...Transisi? apa itu transisi?
wah bingung juga jelasin nya, mending langsung lihat preview nya aja ya..
Tansisi pada tombol
Transisi Pada Kotak Biru
Animasi Kotak Biru
Transisi di atas hanya bisa berjalan di browser Safari, Firefox, Opera dan Chrome, dan tidak akan bisa digunakan di Internet Explorer.
Bagaimana ? Tertarik atau tidak....berikut source kode nya...
<style type="text/css">
.tautan { margin-bottom:14px;}
.tautan a {
padding: 10px; background-color:#CCC; color:#666;
}
.tautan a:hover {
background-color:#666; color:#FFF;
-moz-transition: background 0.25s ease-in-out; /*-moz untuk firefox 4*/
-o-transition : background 0.25s ease-in-out; /*-o untuk opera*/
-webkit-transition: background 0.25s ease-in-out; /*-webkit untuk chrome dan safari*/
transition: background 0.25s ease-in-out;
}
.kotakbiru {
width:100px;
height:100px;
padding:3px;
text-align:center;
color:white;
background:#3d85c6;
transition:width 5s, height 5s;
-moz-transition:width 5s, height 5s, -moz-transform 2s;
-webkit-transition:width 5s, height 5s, -webkit-transform 2s;
-o-transition:width 5s, height 5s, -o-transform 2s;
}
.kotakbiru:hover {
width:200px;
height:200px;
padding 10px;
transform:rotate(270deg);
-moz-transform:rotate(270deg);
-webkit-transform:rotate(270deg);
-o-transform:rotate(270deg);
}
</style>
<div class="tautan"> <a href="#">TOMBOL</a> </div>
<div class="kotakbiru">Animasi Kotak Biru</div>