CSS 3 Animasi Lingkaran Zoom

CSS 3 Animasi Lingkaran Zoom - Efek Zoom Animation dengan CSS 3 merupakan tutorial yang saya bagikan di awal bulan Juli 2012 ini. Tidak banyak yang bisa saya bagikan, jadi silahkan di analisis sendiri code beserta scriptnya.

DEMO :

Ganti Disini

CSS 3 Animasi Lingkaran Zoom Lucu ya lingkarannya bisa berputar dan Zooming otomatis seperti Demo diatas, kalian bisa lihat bahwa lingkaran tersebut melakukan efek rotate dan skala secara otomatis.


CSS3 ini masih bisa anda kembangkan, silahkan anda manipulasi sesuka anda.
Script Embed

<style type="text/css">
#contenido{
width:700px;
margin:0 auto;
padding:50px;
position:relative;
background:#FFF;
}
.circulo {
display:table-cell;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
height:100px;
width:100px;
background:#dedede;
text-align:center;
vertical-align:middle;
}
.circulo span{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
@-webkit-keyframes rotar
{
0% {-webkit-transform:scale(1) rotate(0deg);}
50% {-webkit-transform:scale(1.5) rotate(180deg);}
100% {-webkit-transform:scale(1) rotate(360deg);}
}
@-moz-keyframes rotar
{
0% {-moz-transform:scale(1) rotate(0deg);}
50% {-moz-transform:scale(1.5) rotate(180deg);}
100% {-moz-transform:scale(1) rotate(360deg);}
}
.circulo
{
-webkit-animation:rotar 4s infinite;
-moz-animation:rotar 4s infinite;
}
</style>
<div id="contenido">
<div class="circulo"><Ganti Disini</div>
</div>

Oke Selamat Mencobanya.
Salam Blogger Donomulyo.