Question

我正在使用css3，

开发一些基本的cog动画

我遇到的问题是齿轮稍微移动而不是停留在一个确切的位置。

是否可以将图像固定在一个位置，这样它们就不会移动。

艾米的帮助会很棒!!!

请参阅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;
}

Answer 1

背景图像偏离中心。

尝试添加：背景位置：中心;

Answer 2

图像不是完全正方形 - g1是54x53; g2是80x79; g3是39x38。

更大的问题是你的div比背景图像大。 #gear1是58x58，但图像只有54x53，所以有一些额外的空间使得看起来像div在旋转时齿轮正在移动。

Css3动画 - 如何让动画在精确的位置旋转

2 个答案: