CSS3 Animated Gears

admin

CSS3 Animated Gears

In today’s lesson, we have made the animated gears with CSS3. The result looks very nice. I have used CSS3 keyframes, animation and transforms (rotate) in order to achieve this result. Please pay attention – current demo works well in Firefox and Chrome / Safari (webkit).

---

Here are samples and downloadable package:

Live Demo

download in package

---

Ok, download the example files and lets start coding !

---

Step 1. HTML

As usual, we start with the HTML. Here is the html code of our result. There are easy DIV elements.

index.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>

Step 2. CSS

Here are the CSS styles of our animated gears.

css/layout.css

/* CSS3 keyframes */@-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 */.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('../images/g1.png') no-repeat 0 0;    height: 85px;    left: 31px;    top: 45px;    width: 85px;    -moz-animation-name: ckw;    -moz-animation-duration: 10s;    -webkit-animation-name: ckw;    -webkit-animation-duration: 10s;}#gear2 {    background: url('../images/g2.png') no-repeat 0 0;    height: 125px;    left: 105px;    top: 10px;    width: 125px;    -moz-animation-name: cckw;    -moz-animation-duration: 16.84s;    -webkit-animation-name: cckw;    -webkit-animation-duration: 16.84s;}#gear3 {    background: url('../images/g3.png') no-repeat 0 0;    height: 103px;    left: 149px;    top: 118px;    width: 103px;    -moz-animation-name: ckw;    -moz-animation-duration: 13.5s;    -webkit-animation-name: ckw;    -webkit-animation-duration: 13.5s;}#gear4 {    background: url('../images/g4.png') no-repeat 0 0;    height: 144px;    left: 46px;    top: 173px;    width: 144px;    -moz-animation-name: cckw;    -moz-animation-duration: 20.2s;    -webkit-animation-name: cckw;    -webkit-animation-duration: 20.2s;}#gear5 {    background: url('../images/g1.png') no-repeat 0 0;    height: 85px;    left: 127px;    top: 292px;    width: 85px;    -moz-animation-name: ckw;    -moz-animation-duration: 10s;    -webkit-animation-name: ckw;    -webkit-animation-duration: 10s;}#gear6 {    background: url('../images/g2.png') no-repeat 0 0;    height: 125px;    left: 200px;    top: 283px;    width: 125px;    -moz-animation-name: cckw;    -moz-animation-duration: 16.84s;    -webkit-animation-name: cckw;    -webkit-animation-duration: 16.84s;}#gear7 {    background: url('../images/g3.png') no-repeat 0 0;    height: 103px;    left: 277px;    top: 217px;    width: 103px;    -moz-animation-name: ckw;    -moz-animation-duration: 13.5s;    -webkit-animation-name: ckw;    -webkit-animation-duration: 13.5s;}

Step 3. Images

I have used next images: