CSS3 animation (with rotation and movement and scaling) not working

Question

I have a piece of code where I want to move the image of a Voyager 1 shuttle from left to right, all the while having it spin and become from small to a larger size and then coming to a stop at the final destination. I am using the below code but it doesn't work . I mean nothing happens at all. Could anyone please look at it and let me know if I am doing it right ? I am a beginner to CSS & CSS3. Thanks!

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

keyframes CSS property DOES NOT require '@' symbol with browser prefix. Updated 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 2

You have a typo in @-webkit-@keyframes

It should be @-webkit-keyframes and so on.

Jsfiddle Demo