尝试使用CSS3动画，工作不

Question

.car { 
    background: url('cartemplate orange 1.png'); 
    width: 444px; 
    height: 150px; 
} 
    .carleft { 
     -webkit-animation: moveLeft 3s; 
     -webkit-animation-delay:2s; 
     -webkit-animation-iteration-count: infinite; 

     -moz-animation: moveLeft 3s; 
     -moz-animation-iteration-count: infinite; 

     -ms-animation: moveLeft 3s; 
     -ms-animation-iteration-count: infinite; 

     -o-animation: moveLeft 3s; 
     -o-animation-iteration-count: infinite; 

     animation: moveLeft 3s; 
     animation-iteration-count: infinite; 
    } 

    @-webkit-keyframes moveLeft 
    { 
     0% { right: -500px; } 
     50% { right: 700px; } 
     100% { right: 2000px; } 

    } 

    @-moz-keyframes moveLeft 
    { 
     0% { right: -500px; } 
     50% { right: 700px; } 
     100% { right: 2000px; } 

    } 

    @-ms-keyframes moveLeft 
    { 
     0% { right: -500px; } 
     50% { right: 700px; } 
     100% { right: 2000px; } 

    } 

    @keyframes moveLeft 
    { 
     0% { right: -500px; } 
     50% { right: 700px; } 
     100% { right: 2000px; } 

    } 

    .carright { 
     -webkit-animation: moveRight 3s; 
     -webkit-animation-delay:2s; 
     -webkit-animation-iteration-count: infinite; 

     -moz-animation: moveRight 3s; 
     -moz-animation-iteration-count: infinite; 

     -ms-animation: moveRight 3s; 
     -ms-animation-iteration-count: infinite; 

     -o-animation: moveRight 3s; 
     -o-animation-iteration-count: infinite; 

     animation: moveRight 3s; 
     animation-iteration-count: infinite; 
    } 

    @-webkit-keyframes moveRight 
    { 
     0% { left: -500px; } 
     50% { left: 700px; } 
     100% { left: 2000px; } 

    } 

    @-moz-keyframes moveRight 
    { 
     0% { left: -500px; } 
     50% { left: 700px; } 
     100% { left: 2000px; } 

    } 

    @-ms-keyframes moveRight 
    { 
     0% { left: -500px; } 
     50% { left: 700px; } 
     100% { left: 2000px; } 

    } 

    @keyframes moveRight 
    { 
     0% { left: -500px; } 
     50% { left: 700px; } 
     100% { left: 2000px; } 

    } 

    .wheel { 
     width: 50px !important; 
     height: 50px !important; 
     position: relative; 
    } 

     .wheel1 {  
      width: 100%; 
      height: 100%; 
      background-color: #3D3D3D; 
      border-radius: 50%/50%; 
      position: absolute;  
     } 

     .wheel2 { 
      width: 70%; 
      height: 70%; 
      background-color: #B8B8B8; 
      margin: 10%;  
      border-radius: 50%/50%; 
      position: absolute; 

      -webkit-animation: wheelActive 800ms; 
      -webkit-animation-iteration-count: infinite; 

      -moz-animation: wheelActive 800ms; 
      -moz-animation-iteration-count: infinite; 

      -ms-animation: wheelActive 800ms; 
      -ms-animation-iteration-count: infinite; 

      -o-animation: wheelActive 800ms; 
      -o-animation-iteration-count: infinite; 

      animation: wheelActive 800ms; 
      animation-iteration-count: infinite; 
     } 

     @-webkit-keyframes wheelActive 
     { 
      0% { margin: 15%; height: 70%; width: 70%; } 
      50% { margin: 5%; height: 90%; width: 90%; } 
      100% { margin: 15%; height: 70%; width: 70%; } 

     } 

     @-moz-keyframes wheelActive 
     { 
      0% { margin: 15%; height: 70%; width: 70%; } 
      50% { margin: 5%; height: 90%; width: 90%; } 
      100% { margin: 15%; height: 70%; width: 70%; } 

     } 

     @-ms-keyframes wheelActive 
     { 
      0% { margin: 15%; height: 70%; width: 70%; } 
      50% { margin: 5%; height: 90%; width: 90%; } 
      100% { margin: 15%; height: 70%; width: 70%; } 

     } 

     @keyframes wheelActive 
     { 
      0% { margin: 15%; height: 70%; width: 70%; } 
      50% { margin: 5%; height: 90%; width: 90%; } 
      100% { margin: 15%; height: 70%; width: 70%; } 

     } 

    .wheelleft, .wheelright { 
     position: absolute; 
    } 

    .carleft .wheelleft { 
     top: 135px; 
     left: 53px; 
    } 

    .carleft .wheelright { 
     top: 135px; 
     left: 348px; 
    } 

    .carright .wheelleft { 
     top: 135px; 
     left: 64px; 
    } 

    .carright .wheelright { 
     top: 135px; 
     left: 358px; 
    } 

<div class="car carleft"> 
    <div class="wheel wheelleft"> 
     <div class="wheel1"></div> 
     <div class="wheel2"></div> 
    </div> 

    <div class="wheel wheelright"> 
     <div class="wheel1"></div> 
     <div class="wheel2"></div> 
    </div> 
</div> 

的jsfiddle做出格的举动：http://jsfiddle.net/c6kBj/

我想打个车在CSS3，从左侧进入到右，也一些车辆从右到左，颜色各异，一切都很花哨。但它不起作用。车轮工作正常，但车辆并未从左向右移动。为什么不？

Answer 1

你缺少position: absolute;您.car格 - 不这样做，.right是没有意义的，因为所有的元素默认position: static;

.car { 
    background: url('cartemplate orange 1.png'); 
    width: 444px; 
    height: 150px; 
    position: absolute; 
} 

http://jsfiddle.net/c6kBj/1/

Answer 2

你实际上应该使用翻译（0,0）到各地（性能比动画的位置值越好）