Tutorial Cara Membuat Animasi Gear Berputar dengan CSS - Tutorial mudah bagaimana cara membuat animasi gear yang berputar memanfaatkan script dan code CSS. Anda perlu Upload sebuah image misalnnya sebuah Gambar gear untuk membuatnya.
Misalnya menggunakan Gambar diatas untuk dibuat berputar, anda bisa mencari gambar lainya dan dikombinasikan sehingga putarannya bisa seperti berantai.
Berikut ini script Membuat Animasi Gear Berputar CSS
HTML
<div class="gear" id="gear1"></div>
CSS
/* CSS3 keyframes aregnoz.blogspot.com */
@-webkit-keyframes ckw {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes ckw {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes cckw {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
@-moz-keyframes cckw {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
/* gears aregnoz.blogspot.com*/
.gear {
float: none;
position: absolute;
text-align: center;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#gear1 {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivzxS6c9SsSfLe4d8uJro85T-SB2hmLeZfxyJnijOZcU675QZe5YxWvmf8vwfyZh_Q_oYXrNLlDlG_fpanSqWTF8yT4NQFErlqh-Oeheazq-rVAeu4KNBndRIk5qcUbIzF4s4ORDAahZT-/s1600/gear.png') no-repeat 0 0;
height: 130px;
left:10px;
top: 10px;
width: 130px;
-moz-animation-name: cckw;
-moz-animation-duration: 16.84s;
-webkit-animation-name: cckw;
-webkit-animation-duration: 16.84s;
}
Information !!! Tulisan dengan Background Merah silahkan Anda ganti dengan link Gambar Anda.
