所以我试图以某种方式在一个元素上做两个动画，但我无法解决它。
这是jsfiddle，其中仅包含重要内容。全文，check here。我想让代表字母L的外星人从右到左（=他现在所处的位置）进入。
所以我想得到的是外星人从右向左移动，但与移动的腿一起移动，以及外星人的形象。
我将解释一些代码。
HTML ：
print(k) <div class="letter_L">
<div class="monster_L">
<img src="http://googledoodle.lucasdebelder.be/images/l/monster.png">
</div>
<div class="benen_L">
<div class="B_1"></div>
<div class="B_2"></div>
<div class="B_1 B_3"></div>
<div class="B_2 B_4"></div>
</div>
</div>
代表外星人的形象
.monster_L表示双腿（= benen）
CSS
.Benen_L答案 0 :(得分：1)
您必须将position: absolute应用于letter_L并对keyframe应用right进行position: absolute属性的翻译。
但是，当您将position: relative或letter_L应用于position: absolute时，内部的所有letter_L元素都不会相对于top。因此，您相应地更改了bottom，left，.letter_L {
width: 100px;
position: absolute;
/* z-index: 100000000; */
height: 90px;
animation-name: moveRTL;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Monster L*/
.monster_L img {
position: absolute;
top: 0;
left: 0;
z-index: 50;
opacity: 1;
width: 70px;
}
/*Been1*/
.B_1 {
position: absolute;
top: 32px;
left: 0;
z-index: 40;
opacity: 1;
width: 8px;
height: 50px;
background-color: #297f40;
border-radius: 0 0 15px 15px;
animation-name: animation_B_1;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Been2*/
.B_2 {
position: absolute;
top: 32px;
left: 8px;
z-index: 40;
opacity: 1;
width: 8px;
height: 50px;
background-color: #297f40;
border-radius: 0 0 15px 15px;
animation-name: animation_B_2;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Been3*/
.B_3 {
left: 16px;
}
/*Been4*/
.B_4 {
left: 24px;
}
@keyframes animation_B_1 {
0% {
top: 28px;
}
50% {
top: 32px;
}
100% {
top: 28px;
}
}
@keyframes animation_B_2 {
0% {
top: 32px;
}
50% {
top: 28px;
}
100% {
top: 32px;
}
}
@keyframes moveRTL {
0% {
right: 0;
}
100% {
right: 200px;
}
}坐标。
我试图为你解决这个问题。
检查更新的fiddle。
参考代码：
<!-- L letter -->
<div class="letter_L">
<div class="monster_L">
<img src="http://googledoodle.lucasdebelder.be/images/l/monster.png">
</div>
<div class="benen_L">
<div class="B_1"></div>
<div class="B_2"></div>
<div class="B_1 B_3"></div>
<div class="B_2 B_4"></div>
</div>
</div>V_ent