使用@keyframe的Css动画转换不起作用

Question

我正在工作的css动画过渡。我有我的div id mybus。它的位置是相对的。它是多个divs位置相对的容器。我正在尝试移动mybus，它是所有其他div的容器，使用动画转换：translateX（）。不是沃金。（问题是，动画时位置重要吗？）我单独地将transform：rotate（）动画应用到div类车轮（它也在mybus内部）中，效果很好。（我没有包含这部分代码）如果需要，我可以给出更多关于代码的信息。

null

.mybus{
  position: relative; 
  animation-name:busgo;
  animation-duration: 10s;
  animation-iteration-count: 2;
  animation-timing-function: linear;
  /* animation-delay: 3s;*/
}

@keyframes busgo{
  0%{
    transform: translateX(20px);
  }
  100%{
    transform: translateX(-1220px);
  }   
}

.busBody{
    background-color: yellow;
    position: absolute;
}

#front{
    height:60px;
    width:70px;
    top:130px;
    left:200px;
    border-top-left-radius: 5px;
}

#back{
    height:90px;
    width:200px;
    top:100px;
    left:270px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.window{
    height:20px;
    width:30px;
    background-color: dimgray;
    position: absolute;
    border-radius: 2px;
}

#w1{
    top:110px;
    left:300px;
}

#w2{
    top:110px;
    left:360px;
}

#w3{
    top:110px;
    left:420px;
}

<div id="mybus">
  <div class="busBody" id="front"></div>
  <div class="busBody" id="back"></div>
  <div class="window" id="w1"></div>
  <div class="window" id="w2"></div>
  <div class="window" id="w3"></div>
  <div class="wheel" id="wh1"></div>
  <div class="wheel" id="wh2"></div>
  <div class="headlight"></div>
</div>

null

Answer 1

您使用的是.mybus而不是#mybus

null

#mybus{
  position: relative; 
  animation-name:busgo;
  animation-duration: 10s;
  animation-iteration-count: 2;
  animation-timing-function: linear;
  /* animation-delay: 3s;*/
}

@keyframes busgo{
  0%{
    transform: translateX(20px);
  }
  100%{
    transform: translateX(-1220px);
  }   
}

.busBody{
    background-color: yellow;
    position: absolute;
}

#front{
    height:60px;
    width:70px;
    top:130px;
    left:200px;
    border-top-left-radius: 5px;
}

#back{
    height:90px;
    width:200px;
    top:100px;
    left:270px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.window{
    height:20px;
    width:30px;
    background-color: dimgray;
    position: absolute;
    border-radius: 2px;
}

#w1{
    top:110px;
    left:300px;
}

#w2{
    top:110px;
    left:360px;
}

#w3{
    top:110px;
    left:420px;
}

<div id="mybus">
  <div class="busBody" id="front"></div>
  <div class="busBody" id="back"></div>
  <div class="window" id="w1"></div>
  <div class="window" id="w2"></div>
  <div class="window" id="w3"></div>
  <div class="wheel" id="wh1"></div>
  <div class="wheel" id="wh2"></div>
  <div class="headlight"></div>
</div>