我该如何解决这个问题？两个动画在一个元素上？

Question

所以我试图以某种方式在一个元素上做两个动画，但我无法修复它。

这是一个jsfiddle其中只包括重要的东西。全图，check here。我想让代表字母L的外星人从右到左进入（=他现在的位置）。

所以我想得到的是，外星人从右向左移动，但与移动的腿一起移动，以及外星人的形象。

我将解释一些代码。

HTML：

  <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_L的图像表示腿（= benen）

CSS

/*Monster L*/ 
.monster_L img { 
    position: absolute; 
    bottom: 296px; 
    left: 596px; 
    z-index: 50; 
    opacity: 1; 
    width: 70px; 
} 

/*Been1*/ 
.B_1 { 
    position: absolute; 
    bottom: 293px; 
    left: 597px; 
    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; 
    bottom: 286px; 
    left: 605px; 
    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: 613px; 
} 
/*Been4*/ 
.B_4 { 
    left: 621px; 
} 
@keyframes animation_B_1 { 
    0%{ bottom: 293px; } 
    50% { bottom: 286px; } 
    100%{ bottom: 293px; } 
} 
@keyframes animation_B_2 { 
    0%{ bottom: 286px; } 
    50% { bottom: 293px; } 
    100%{ bottom: 286px; } 
} 

Answer 1

您必须申请position: absolute到letter_L和应用keyframe它为它的翻译与right财产。

但是当你申请position: absolute或position: relative到letter_L，里面所有position: absolute元素不会是相对于letter_L。因此，您必须相应地更改top，bottom，left坐标。

我试着为你解决这个问题。

检查更新fiddle。

参考代码：

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

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