我該如何解決這個問題？兩個動畫在一個元素上？

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>