使用@keyframe的Css动画过渡不起作用答案

【问题标题】：Css animation transition using @keyframe not working使用@keyframe的Css动画过渡不起作用
【发布时间】：2020-06-27 22:46:55
【问题描述】：

我正在处理 css 动画过渡。我有 div id mybus。它的位置是相对。它是多个div相对位置的容器。我正在尝试使用动画转换移动 mybus，它是所有其他 div 的容器：translateX()。它没有醒来。（问题是，动画时位置重要吗？）我分别将 transform: rotate() 动画应用于 div 类轮子（它也在 mybus 内部），效果很好。（我没有包含这部分代码）如果需要，我可以提供有关代码的更多信息。

.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>

【问题讨论】：

试试#mybus，你使用的id不是class

标签： html css

【解决方案1】：

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

#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>

【讨论】：