我工作的一些基本使用COG動畫CSS3 roating,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;
}