CSS3 Animated Gears

CSS3 Animated Gears

9 42000
CSS3 Animated Gears

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:

gear 1
gear 2
gear 3
gear 4


Live Demo
download in package

Conclusion

Hope you enjoyed with new tutorial, don’t forget to tell thanks and leave a comment :) Good luck!

SIMILAR ARTICLES

jQuery Mobile Lesson 6

0 55
jQuery Mobile Lesson 5

0 75

9 COMMENTS

  1. Cool CSS3 Demo.
    Tip:
    I think wrapping browser-specific CSS properties inside different browser-specific CSS properties is unnecessary since it won’t be executed.

    Your code:

    @-webkit-keyframes ckw {
    0% {
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    }
    100% {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    }
    }

    Should be

    @-webkit-keyframes ckw {
    0% {
    -webkit-transform: rotate(0deg);
    }
    100% {
    -webkit-transform: rotate(360deg);
    }
    }

    • Yes, you are right Larry, thanks for your notice. We don’t need to repeat -moz styles inside keyframes for -webkit, my miss

    • Hello ADv,
      Possible it will work if you add -ms – properties as well (you can try to copy -moz styles). But I’m not sure, there is CSS3 animation with keyframes. Possible it won’t work

  2. Hi there, excellent post. Just curious, how did you figure out the animation-duration in order to make it look like the gears fit together? Was it lots of trial and error or was there a formula you followed? Thanks again!

Leave a Reply