Css3 анимация - как сохранить анимацию в нужном месте

Я работаю над некоторой базовой анимацией cog, используя css3,

Проблема, которую я испытываю, это то, что винтики слегка движутся и не остаются в одном точном месте.

Можно ли исправить изображения в одном месте, чтобы они не двигались.

Эми помогло бы здорово !!!

Пожалуйста, см. 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;
}