Efek Animasi Dasar Pada Blog

1. Image Hover
Kode CSS nya :

.kodokloncat {
float:center;
margin:0px;
autowidth:0px;
autoheight:0px;
autoborder:none;
overflow:hidden
}
.details {
width:200px;
height:300px;
background:#000;
color:#fff;
text-align:center
}
#kodok-3 {
position:relative;
}
#kodok-3 img {
opacity:1-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#kodok-3 .details {
position:absolute;
top:0;
left:0;
opacity: 0;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#kodok-3 .details:hover {
opacity: .9;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

Cara pemanggilannya pada posting :

<div class="kodokloncat" id="kodok-3"><img src="http://4.bp.blogspot.com/_ApWZWmVDgeI/TU1mqcaqjLI/AAAAAAAAAdY/7J7zFBoO_Lg/s320/asian+girl01.jpg" width="240" border="0" height="320">

<div class="details"><img src="http://4.bp.blogspot.com/_ApWZWmVDgeI/TU1msHBIvFI/AAAAAAAAAdc/zYAZpMSRInA/s320/asian+girl02.jpg" width="240" border="0" height="320"></div></div>

 2.  Efek Gambar Berputar

Kode CSS nya :

#timings_demo {
margin:0 auto;
border:0px #aaa solid;
padding:10px;
}
.abstrak_box {
width:230px;
height:200px;
margin-bottom:10px;
background:url(http://4.bp.blogspot.com/_ApWZWmVDgeI/TU1mqcaqjLI/AAAAAAAAAdY/7J7zFBoO_Lg/s320/asian+girl01.jpg)
}
#ease.abstrak_box {
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-o-transition: all 4s ease;
-webkit-transition: all 4s ease;
transition: all 4s ease;
border:1px #f00 solid;
}
#timings_demo:hover .abstrak_box, #timings_demo.hover_effect .abstrak_box {
margin-left:300px;
-webkit-border-radius:40px 40px;
-moz-border-radius:40px 40px;
-o-border-radius:25px;
-webkit-transform: rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
background-color:#fff;
}

Untuk pemanggilannya :

<div id="timings_demo"><div class="abstrak_box" id="ease"><div class="center"></div></div></div>

3. Efek Gambar Menghilang

Kode CSS nya :

#waktu_demo {
margin:0 auto;
border:0px #aaa solid;
padding:10px;
}
.amdhas_box {
width:230px;
height:200px;
margin-bottom:10px;
background:url(http://4.bp.blogspot.com/_ApWZWmVDgeI/TU1mqcaqjLI/AAAAAAAAAdY/7J7zFBoO_Lg/s320/asian+girl01.jpg)
}
#ease.amdhas_box {
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-o-transition: all 4s ease;
-webkit-transition: all 4s ease;
transition: all 4s ease;
border:1px #f00 solid;
}
#waktu_demo:hover .amdhas_box, #waktu_demo.hover_effect .amdhas_box {
margin-left:300px;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=6)";
filter: alpha(opacity=6);
-webkit-border-radius:40px 40px;
-moz-border-radius:40px 40px;
-o-border-radius:25px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
background-color:#fff;
}

Cara pemanggilannya :

<div id="waktu_demo"><div class="amdhas_box" id="ease"><div class="center"></div></div></div>

4. Efek Gambar Berjalan

Kode CSSnya :

#japra_demo {
margin:0 auto;
border:0px #aaa solid;
padding:10px;
}
.feti_box {
width:230px;
height:200px;
margin-bottom:10px;
background:url(http://4.bp.blogspot.com/_ApWZWmVDgeI/TU1mqcaqjLI/AAAAAAAAAdY/7J7zFBoO_Lg/s320/asian+girl01.jpg)
}
#ease.feti_box {
-webkit-transition: all 4s ease-in;
-moz-transition: all 4s ease-in;
-o-transition: all 4s ease-in;
-webkit-transition: all 4s ease-in;
transition: all 4s ease-in;
border:1px #f00 solid;
}
#japra_demo:hover .feti_box, #japra_demo.hover_effect .feti_box {
margin-left:300px;
-moz-transform:rotateY(180deg);
-webkit-transform: rotateY(180deg);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
}

Cara pemanggilannya :

<div id="japra_demo"><div class="feti_box" id="ease"><div class="center"></div></div></div>

Related Post