我有一段代码,我想将航海者一号航天飞机的图像从左向右移动,同时让它旋转并从小变大,然后在最终目的地停下来.我正在使用下面的代码,但它不起作用。我的意思是什么都没有发生。谁能看看它,让我知道我做的是否正确?我是 CSS 和 CSS3 的初学者。谢谢!
HTML:
<div class = "voyager">
<img class="shuttle" src="http://i57.tinypic.com/2s66hyc.jpg" />
</div>
CSS:
@keyframes left-right {
0%{left:44%;}
100%{left:100%;}
}
@-webkit-@keyframes left-right {
0%{left:44%;}
100%{left:100%};
}
@keyframes big-small {
0% {transform:scale(0.25);}
25% {transform:scale(0.5);}
50% {transform:scale (0.50);}
75% {transform:scale (0.75);}
100% {transform:scale(1);}
}
@-webkit-@keyframes big-small {
0% {transform:scale(0.25);}
25% {transform:scale(0.5);}
50% {transform:scale (0.50);}
75% {transform:scale (0.75);}
100% {transform:scale(1);}
}
@keyframes spinning {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-webkit-@keyframes spinning {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.shuttle {
top:50px;
position:relative;
left:44%;
animation: spinning 4s 1s 3 linear normal,
big-small 4s 1s 3 linear normal,
left-right 4s 1s 3 linear normal;
-webkit-animation: spinning 4s 1s 3 linear normal,
big-small 4s 1s 3 linear normal,
left-right 4s 1s 3 linear normal;
}
最佳答案
关键帧 CSS 属性不需要带浏览器前缀的“@”符号。更新的 CSS:
@keyframes left-right {
0%{left:44%;}
100%{left:100%;}
}
@-webkit-keyframes left-right {
0%{left:44%;}
100%{left:100%};
}
@keyframes big-small {
0% {transform:scale(0.25);}
25% {transform:scale(0.5);}
50% {transform:scale (0.50);}
75% {transform:scale (0.75);}
100% {transform:scale(1);}
}
@-webkit-keyframes big-small {
0% {transform:scale(0.25);}
25% {transform:scale(0.5);}
50% {transform:scale (0.50);}
75% {transform:scale (0.75);}
100% {transform:scale(1);}
}
@keyframes spinning {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes spinning {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.shuttle {
top:50px;
position:relative;
left:44%;
animation: spinning 4s 1s 3 linear normal,
big-small 4s 1s 3 linear normal,
left-right 4s 1s 3 linear normal;
-webkit-animation: spinning 4s 1s 3 linear normal,
big-small 4s 1s 3 linear normal,
left-right 4s 1s 3 linear normal;
}
关于html - CSS3 动画(旋转、移动和缩放)不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25407894/