How can I get around this issue? Two animations on one element? - html

Question

So I'm trying to somehow do two animations on one element but I can't be able to fix it.
Here is a jsfiddle which includes only the important things. For the full picture, check here. I want to make the alien which represents the letter L coming in from the right to left (= the position where he is now at).
So what I want to get is that the alien moves from right to left, but together with the moving legs, and the image of the alien.
I will explain some of the code.
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 represents the image of the alien
.Benen_L represents the legs (=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

You have to apply position: absolute to letter_L and apply a keyframe to it for its translation with the right property.
However when you apply position: absolute or position: relative to letter_L, all position: absolute elements inside are not going to be relative to letter_L. So you have change the top, bottom, left coordinates accordingly.
I have tried to solve this for you.
Check updated fiddle.
Refer code:
.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>