html - CSS3 动画(旋转、移动和缩放)不起作用

Question

我有一段代码，我想将航海者一号航天飞机的图像从左向右移动，同时让它旋转并从小变大，然后在最终目的地停下来.我正在使用下面的代码，但它不起作用。我的意思是什么都没有发生。谁能看看它，让我知道我做的是否正确？我是 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;      
}

Answer 1

关键帧 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;      
}