I got some css for rotating gears and so far they work great in Firefox but do not work in IE. Can anyone provide a fix to this problem.
Here is my html to reference the classes:
<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>
Here is my css:
/* CSS3 keyframes */
#-webkit-keyframes ckw {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes ckw {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes cckw {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#-moz-keyframes cckw {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes cckw {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
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;
-o-animation-direction: normal;
-moz-animation-delay: 0;
-o-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-delay: 0;
animation-delay: 0;
-webkit-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#gear1 {
background: url('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;
-o-animation-name: ckw;
animation-name: ckw;
-webkit-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
}
#gear2 {
background: url('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;
-o-animation-name: cckw;
animation-name: cckw;
-webkit-animation-duration: 16.84s;
-o-animation-duration: 16.84s;
animation-duration: 16.84s;
}
#gear3 {
background: url('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;
-o-animation-name: ckw;
animation-name: ckw;
-webkit-animation-duration: 13.5s;
-o-animation-duration: 13.5s;
animation-duration: 13.5s;
}
#gear4 {
background: url('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;
-o-animation-name: cckw;
animation-name: cckw;
-webkit-animation-duration: 20.2s;
-o-animation-duration: 20.2s;
animation-duration: 20.2s;
}
#gear5 {
background: url('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;
-o-animation-name: ckw;
animation-name: ckw;
-webkit-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
}
#gear6 {
background: url('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;
-o-animation-name: cckw;
animation-name: cckw;
-webkit-animation-duration: 16.84s;
-o-animation-duration: 16.84s;
animation-duration: 16.84s;
}
#gear7 {
background: url('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;
-o-animation-name: ckw;
animation-name: ckw;
-webkit-animation-duration: 13.5s;
-o-animation-duration: 13.5s;
animation-duration: 13.5s;
}
If you're using anything older than IE 10, keyframe animations are not going to work. See Caniuse for compatibility tables, and consider a JavaScript/jQuery alternative or polyfill if you need older browser support.
EDIT: It looks like some of your CSS (i.e., you .gear class) is missing the -ms prefix, which will give you somewhat broader compatibility.
Related
I want to use a rotating/spinning letter as my loader on a website. I want it to rotate through the center.
I have used transform-origin: center center; as mentioned here. But no help.
Can some fix this? Thanks!
Also, Is this the right approach? Please mention if there is any better of achieving this?
(I don't want to go with the svg.)
CSS
.custom-spinner2 {
font-family: sans-serif;
color: black;
margin: 5rem;
width: 2rem;
height: auto;
line-height: 1rem;
transform-origin: center center;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: spin;
-moz-animation-duration: 1000ms;
-moz-animation-iteration-count: infinite;
-ms-animation-name: spin;
-ms-animation-duration: 1000ms;
-ms-animation-iteration-count: infinite;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
**HTML**
<p class="custom-spinner2" style="font-size:5rem !important;">W</p>
Do this. First, centralize the letter both vertically and horizontally to the center of the page. Then apply rotation animation to the letter. It should work. Don't add any sort of width to the text. Otherwise, the text will left align itself in that width and the animation will look weird.
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
p {
animation: Rotate infinite 1s;
font-size: 50px;
}
#keyframes Rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<p>M</p>
Change the display from block to inline-block and remove the width:
.custom-spinner2 {
font-family: sans-serif;
color: black;
margin: 5rem;
display: inline-block;
height: auto;
line-height: 1rem;
transform-origin: center center;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: spin;
-moz-animation-duration: 1000ms;
-moz-animation-iteration-count: infinite;
-ms-animation-name: spin;
-ms-animation-duration: 1000ms;
-ms-animation-iteration-count: infinite;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
**HTML**
<p class="custom-spinner2" style="font-size:5rem !important;">W</p>
width is set to 2 rem, which makes the letter to go outside the container, around whose center it rotates (the letter needs more space). Set width to 5rem and you are set:
.custom-spinner2 {
font-family: sans-serif;
color: black;
margin: 5rem;
width: 5rem;
height: auto;
line-height: 1rem;
transform-origin: center center;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: spin;
-moz-animation-duration: 1000ms;
-moz-animation-iteration-count: infinite;
-ms-animation-name: spin;
-ms-animation-duration: 1000ms;
-ms-animation-iteration-count: infinite;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
**HTML**
<p class="custom-spinner2" style="font-size:5rem !important;">W</p>
I tried a lot of things but nothing is working, idk if its a transform/translateX thing or not. I tried fading and it worked, but bouncing and the translateX is not working. I am currently using brakets software and I also tried sublime test 2. Please help.
Thanks.
/*animations*/
/******************
* Bounce in right *
*******************/
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
}
.slow{
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
}
.slower{
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
}
.slowest{
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
}
.bounceInRight, .bounceInLeft, .bounceInUp, .bounceInDown{
opacity:0;
-webkit-transform: translateX(100px);
-moz-transform: translateX(100px);
}
.fadeInRight, .fadeInLeft, .fadeInUp, .fadeInDown{
opacity:0;
-webkit-transform: translateX(400px);
-moz-transform: translateX(400px);
}
.flipInX, .flipInY, .rotateIn, .rotateInUpLeft, .rotateInUpRight,
.rotateInDownLeft, .rotateDownUpRight, .rollIn{
opacity:0;
}
.lightSpeedInRight, .lightSpeedInLeft{
opacity:0;
-webkit-transform: translateX(400px);
-moz-transform: translateX(400px);
}
/***********
* bounceIn *
************/
#-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
#-moz-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(.3);
}
50% {
opacity: 1;
-moz-transform: scale(1.05);
}
70% {
-moz- transform: scale(.9);
}
100% {
-moz-transform: scale(1);
}
}
.bounceIn.go {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
}
/****************
* bounceInRight *
****************/
#-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
}
30%{
-webkit-transform: translateX(100px)
}
60% {
-webkit-transform: translateX(-10px);
}
80% {
-webkit-transform: translateX(5px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
#-moz-keyframes bounceInRight {
0% {
opacity: 1;
-moz- transform: translateX(100px);
}
30%{
-moz- transform: translateX(100px)
}
60% {
-moz-transform: translateX(-10px);
}
80% {
-moz-transform: translateX(5px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
.bounceInRight.go {
-webkit-animation-name: bounceInRight;
-moz-animation-name: bounceInRight;
}
You need the unprefixed properties.
So for example:
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s; // unprefixed
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-duration: 1s; // unprefixed
}
Thank you for your help. I have found the answer. My html code had something wrong which was:
style='display:inline, it works on chrome but for Firefox and Safari you should use this: style='display:inline-block.
Thanks again.
At first, check your syntax. I have noticed that there are some "broken" properties, written '-moz- transform'. It should be one word.
Second, could you provide some HTML or a jsfiddle?
(I could not post it as a comment - not enough reputation to do that.)
I am trying to animate a div to spin 360deg and move 400px to the right. How can I do this using CSS3? Do I need to use CSS3 keyframes?
<div id="spin"></div>
CSS:
#spin {
width:200px;
height:200px;
background-color:blue;
}
Yes, you need keyframes:
#spin {
width: 200px;
height: 200px;
background-color: blue;
-webkit-animation: myanimation 5s;
animation: myanimation 5s;
}
#-webkit-keyframes myanimation {
100% { margin-left: 400px; -webkit-transform: rotate(360deg); }
}
#keyframes myanimation {
100% { margin-left: 400px; transform: rotate(360deg); }
}
<div id="spin"></div>
add all the prefixes so it works on all modern browsers
-webkit-
-moz-
-ms-
-o-
Try this and adjust to your needs:
#spin {
position: absolute;
width: 200px;
height: 200px;
background: #00f;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
left: 0px;
}
to {
transform: rotate(360deg);
left: 400px;
}
}
<div id="spin"></div>
So I want to rotate an icon in place using css.
I've tried this
.rotate-icon-gif {
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg);
-webkit-transform-origin: 30px 22px;
}
to { -webkit-transform: rotate(360deg);
-webkit-transform-origin: 30px 22px;
}
}
#keyframes spin {
from {
transform:rotate(0deg);
transform-origin: 55% 50%;
}
to {
transform:rotate(360deg);
transform-origin: 55% 50%;
}
}
But it won't rotate in place - it rotates about some other center.
I've looked at the dimensions of the div that has this -
It's 60 x 30, with 15 padding on top. Hence, I've tried to make the transform-origin on 30px and 22px offsets.
It's still not working - how should I go about fixing this?
There are two methods of achieving this. Firstly, you can edit the image so the center lies directly on the axis of rotation.
First Method
Using cropped image. (No CSS added, deleted obsolete transition-origin)
See snippet:
.rotate-icon-gif {
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg);
}
to { -webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
<img src="http://i.imgur.com/tPLLoew.png" class="rotate-icon-gif">
Second Method
You can use transform-origin: x y; Here, you need to find the x and y coordinates of the axis using Paint or Photoshop like this: (You need to find the coordinates of intersection of black line)
See snippet :
.rotate-icon-gif {
-webkit-animation-name: spin;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
transform-origin: 42px 35px;
}
to {
-ms-transform: rotate(360deg);
transform-origin: 42px 35px;
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
-moz-transform-origin: 42px 35px;
}
to {
-moz-transform: rotate(360deg);
-moz-transform-origin: 42px 35px;
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
-webkit-transform-origin: 42px 35px;
}
to {
-webkit-transform: rotate(360deg);
-webkit-transform-origin: 42px 35px;
}
}
#keyframes spin {
from {
transform: rotate(0deg);
transform-origin: 42px 35px;
}
to {
transform: rotate(360deg);
transform-origin: 42px 35px;
}
}
<img src="http://i.stack.imgur.com/GZ2CV.png" class="rotate-icon-gif">
NOTE - From my other answer : link
I am working on some basic cog animation using css3,
The problem I have is the cogs are moving around slightly and not staying in one exact spot.
Is it possible to fix the images in one spot so they dont move.
Amy help would be great !!!
Please see Fiddle
.container{
background:black;
}
#cog-animation{
height: 200px;
margin: 0 auto;
max-width: 380px;
position: relative;
margin-top: 30px;
}
/* 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('http://paulobriendesign.co.uk/images/g1.png') no-repeat 0 0;
height: 58px;
width: 58px;
left: 81px;
top: 25px;
-moz-animation-name: ckw;
-moz-animation-duration: 10s;
-webkit-animation-name: ckw;
-webkit-animation-duration: 10s;
}
#gear2 {
background: url('http://paulobriendesign.co.uk/images/g2.png') no-repeat 0 0;
height: 85px;
left: 143px;
top: 36px;
width: 85px;
-moz-animation-name: cckw;
-moz-animation-duration: 16.84s;
-webkit-animation-name: cckw;
-webkit-animation-duration: 16.84s;
}
#gear3 {
background: url('http://paulobriendesign.co.uk/images/g3.png') no-repeat 0 0;
height: 45px;
width: 45px;
left: 218px;
top: 11px;
-moz-animation-name: ckw;
-moz-animation-duration: 13.5s;
-webkit-animation-name: ckw;
-webkit-animation-duration: 13.5s;
}
The background images are off center.
Try adding:
background-position:center;
The images aren't perfectly square - g1 is 54x53; g2 is 80x79; g3 is 39x38.
The bigger issue is your divs are bigger than your background images. #gear1 is 58x58, but the image is only 54x53, so there is some extra space which makes it look like the gear is moving when the div rotates.