Css animation transition using #keyframe not working - html

Question

I am working on css animation transition.I have div id mybus. It's position is relative. It is the container of multiple divs position relative. I am trying to move the mybus which is the container of all other divs using animation transform: translateX(). It's not woking. (Question is, does position matter while animation?)
I separately applied animation which is transform: rotate() to the div class wheels (It is also inside mybus)which is working well. (I did't include this part of code ) I can give more info about code if needed.
.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>

Answer 1

You were using .mybus instead of #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>