0 Animasi Gear berputar keren :

Gear,ini selalu ada pada kendaraan ringan,seperti halnya sepeda motor maupun mobil. dan dalam hal ini,ada hal yang menarik dari gear yang terdapat pada dunia maya ini. dan seperti biasa yang dapat di gerakkan yaitu adalah keyframes dan animation dalam bahasa pemograman ini.


Screenshot

Code

css

<style>
body {
 background: gray;
 }
@-webkit-keyframes gear {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes gear {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes ggear {
    0% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}
@-moz-keyframes ggear {
    0% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}

/* gears */
.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/AVvXsEj4_nPhXVPm0VJ-L9y-PvEy2gBwZczXieLilfhjt8P5VcxO38ok1p37OuIhLkABM6DzvBQ9R4ew3osD06o85ut_N_KNgosSGSlzBVIEGXgbqSJJvBiy2uvaU_CGS8IiP3Z6h-FECH4PALeq/s400/g1.png') no-repeat 0 0;
    height: 85px;
    left: 31px;
    top: 45px;
    width: 85px;

    -moz-animation-name: gear;
    -moz-animation-duration: 10s;

    -webkit-animation-name: gear;
    -webkit-animation-duration: 0.2s;
}
#gear2 {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6gGxY8U7uLwccsTyPio6GUaEMRRIGNbX_RCWWBhUxFSHtjJKPheJd89JISMFgeasTw3yDWQpB143GwImXmXZ7_Mz4065gPmOG_1FXIDMqqgzijEDBlV0cgSpNW7KgrNOsvgYmKwxoXfRq/s400/g2.png') no-repeat 0 0;
    height: 125px;
    left: 105px;
    top: 10px;
    width: 125px;

    -moz-animation-name: ggear;
    -moz-animation-duration: 1s;

    -webkit-animation-name: ggear;
    -webkit-animation-duration: 1s;
}
#gear3 {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg0Rsch_gqltxN4x03wGXZ2-70OJzioJA_5eR-3TQkrQb5pwKFyFoKdcNRw53MdCmF2i7HtzHCeBE8hEVcyClT5w2N0cUSo4YrfpGAnPiHM5FoyDVF3b5YIc3ROWo2HRjQnmdo18RfSxT7/s400/g3.png') no-repeat 0 0;
    height: 103px;
    left: 149px;
    top: 118px;
    width: 103px;

    -moz-animation-name: gear;
    -moz-animation-duration: 1s;

    -webkit-animation-name: gear;
    -webkit-animation-duration: 1s;
}
#gear4 {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr0e2mWMUQ1ViKF8fJfXS-kozbNFXK9eUkPOCRhKa2dSXQ4b3iF8fcQpY97wV4fsDr1WJBU3Fj97DNhyphenhypheng7ud9g77e9YfiFijfN5hyphenhyphendhILPRQkc1QPeAcn2PO5eVTvCvw0oSkiEmrx2rN2e/s400/g4.png') no-repeat 0 0;
    height: 140px;
    left: 46px;
    top: 173px;
    width: 144px;

    -moz-animation-name: ggear;
    -moz-animation-duration: 1s;

    -webkit-animation-name: ggear;
    -webkit-animation-duration: 1s;
}
#gear5 {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4_nPhXVPm0VJ-L9y-PvEy2gBwZczXieLilfhjt8P5VcxO38ok1p37OuIhLkABM6DzvBQ9R4ew3osD06o85ut_N_KNgosSGSlzBVIEGXgbqSJJvBiy2uvaU_CGS8IiP3Z6h-FECH4PALeq/s400/g1.png') no-repeat 0 0;
    height: 90px;
    left: 127px;
    top: 292px;
    width: 85px;

    -moz-animation-name: gear;
    -moz-animation-duration: 0.2s;

    -webkit-animation-name: gear;
    -webkit-animation-duration: 0.2s;
}
#gear6 {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6gGxY8U7uLwccsTyPio6GUaEMRRIGNbX_RCWWBhUxFSHtjJKPheJd89JISMFgeasTw3yDWQpB143GwImXmXZ7_Mz4065gPmOG_1FXIDMqqgzijEDBlV0cgSpNW7KgrNOsvgYmKwxoXfRq/s400/g2.png') no-repeat 0 0;
    height: 125px;
    left: 200px;
    top: 283px;
    width: 125px;

    -moz-animation-name: ggear;
    -moz-animation-duration: 1s;

    -webkit-animation-name: ggear;
    -webkit-animation-duration: 1s;
}
#gear7 {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg0Rsch_gqltxN4x03wGXZ2-70OJzioJA_5eR-3TQkrQb5pwKFyFoKdcNRw53MdCmF2i7HtzHCeBE8hEVcyClT5w2N0cUSo4YrfpGAnPiHM5FoyDVF3b5YIc3ROWo2HRjQnmdo18RfSxT7/s400/g3.png') no-repeat 0 0;
    height: 105px;
    left: 277px;
    top: 217px;
    width: 103px;

    -moz-animation-name: gear;
    -moz-animation-duration: 1s;

    -webkit-animation-name: gear;
    -webkit-animation-duration: 1s;
}
</style>

HTML

 <div class="container">
            <div class="gear" id="gear1"></div>
            <div class="gear" id="gear2"></div>
            <div class="gear" id="gear3"></div>
            <div class="gear" id="gear4"></div>
            <div class="gear" id="gear5"></div>
            <div class="gear" id="gear6"></div>
            <div class="gear" id="gear7"></div>
        </div>

Setelah itu simpan  dan lihat hasil nya .

Keterangan : Hanya Support Mozilla Dan Google Chrome

referensi :http://trisnanugrohosite.blogspot.com/2012/11/gear-berputar-cepat.html