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:
Live Demo
download in package
Conclusion
Hope you enjoyed with new tutorial, don’t forget to tell thanks and leave a comment :) Good luck!
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
Larry is right…And i like to tell one thing,this site is really helpful.i can say awesome in one word….tnx
Is there any pissibility to make this work in IE?
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
Great work! I like it,
How would you make them static and only trigger :hover state on all gears?
Tnx
Hello Milo,
In your case you can disable animation for elements, and start it on :onhover
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!
Hi Joe, Yes, this is result of long experiments