Home » Tutorials

CSS3 Animated Gears

Tutorials
Author Reading 6 min Views 1k. Published by Modified by

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:

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/layout.css
  5. Step 3. Images
  6. Conclusion
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

1 <div class="container">
2     <div class="gear" id="gear1"></div>
3     <div class="gear" id="gear2"></div>
4     <div class="gear" id="gear3"></div>
5     <div class="gear" id="gear4"></div>
6     <div class="gear" id="gear5"></div>
7     <div class="gear" id="gear6"></div>
8     <div class="gear" id="gear7"></div>
9 </div>

Step 2. CSS

Here are the CSS styles of our animated gears.

css/layout.css

001 /* CSS3 keyframes */
002 @-webkit-keyframes ckw {
003     0% {
004         -moz-transform: rotate(0deg);
005         -webkit-transform: rotate(0deg);
006     }
007     100% {
008         -moz-transform: rotate(360deg);
009         -webkit-transform: rotate(360deg);
010     }
011 }
012 @-moz-keyframes ckw {
013     0% {
014         -moz-transform: rotate(0deg);
015         -webkit-transform: rotate(0deg);
016     }
017     100% {
018         -moz-transform: rotate(360deg);
019         -webkit-transform: rotate(360deg);
020     }
021 }
022 @-webkit-keyframes cckw {
023     0% {
024         -moz-transform: rotate(360deg);
025         -webkit-transform: rotate(360deg);
026     }
027     100% {
028         -moz-transform: rotate(0deg);
029         -webkit-transform: rotate(0deg);
030     }
031 }
032 @-moz-keyframes cckw {
033     0% {
034         -moz-transform: rotate(360deg);
035         -webkit-transform: rotate(360deg);
036     }
037     100% {
038         -moz-transform: rotate(0deg);
039         -webkit-transform: rotate(0deg);
040     }
041 }
042 /* gears */
043 .gear {
044     float: none;
045     position: absolute;
046     text-align: center;
047     -moz-animation-timing-function: linear;
048     -moz-animation-iteration-count: infinite;
049     -moz-animation-direction: normal;
050     -moz-animation-delay: 0;
051     -moz-animation-play-state: running;
052     -moz-animation-fill-mode: forwards;
053     -webkit-animation-timing-function: linear;
054     -webkit-animation-iteration-count: infinite;
055     -webkit-animation-direction: normal;
056     -webkit-animation-delay: 0;
057     -webkit-animation-play-state: running;
058     -webkit-animation-fill-mode: forwards;
059 }
060 #gear1 {
061     background: url('../images/g1.png') no-repeat 0 0;
062     height: 85px;
063     left: 31px;
064     top: 45px;
065     width: 85px;
066     -moz-animation-name: ckw;
067     -moz-animation-duration: 10s;
068     -webkit-animation-name: ckw;
069     -webkit-animation-duration: 10s;
070 }
071 #gear2 {
072     background: url('../images/g2.png') no-repeat 0 0;
073     height: 125px;
074     left: 105px;
075     top: 10px;
076     width: 125px;
077     -moz-animation-name: cckw;
078     -moz-animation-duration: 16.84s;
079     -webkit-animation-name: cckw;
080     -webkit-animation-duration: 16.84s;
081 }
082 #gear3 {
083     background: url('../images/g3.png') no-repeat 0 0;
084     height: 103px;
085     left: 149px;
086     top: 118px;
087     width: 103px;
088     -moz-animation-name: ckw;
089     -moz-animation-duration: 13.5s;
090     -webkit-animation-name: ckw;
091     -webkit-animation-duration: 13.5s;
092 }
093 #gear4 {
094     background: url('../images/g4.png') no-repeat 0 0;
095     height: 144px;
096     left: 46px;
097     top: 173px;
098     width: 144px;
099     -moz-animation-name: cckw;
100     -moz-animation-duration: 20.2s;
101     -webkit-animation-name: cckw;
102     -webkit-animation-duration: 20.2s;
103 }
104 #gear5 {
105     background: url('../images/g1.png') no-repeat 0 0;
106     height: 85px;
107     left: 127px;
108     top: 292px;
109     width: 85px;
110     -moz-animation-name: ckw;
111     -moz-animation-duration: 10s;
112     -webkit-animation-name: ckw;
113     -webkit-animation-duration: 10s;
114 }
115 #gear6 {
116     background: url('../images/g2.png') no-repeat 0 0;
117     height: 125px;
118     left: 200px;
119     top: 283px;
120     width: 125px;
121     -moz-animation-name: cckw;
122     -moz-animation-duration: 16.84s;
123     -webkit-animation-name: cckw;
124     -webkit-animation-duration: 16.84s;
125 }
126 #gear7 {
127     background: url('../images/g3.png') no-repeat 0 0;
128     height: 103px;
129     left: 277px;
130     top: 217px;
131     width: 103px;
132     -moz-animation-name: ckw;
133     -moz-animation-duration: 13.5s;
134     -webkit-animation-name: ckw;
135     -webkit-animation-duration: 13.5s;
136 }

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!

Rate article
© 2026 Script Tutorials