animacja divów w css

0

Witam!
Otóż próbuję zanimować prosty obiekt w css
Kod HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title>jellyfish</title>
    <meta charset="utf-8">
    <link   rel="stylesheet" href="style.css" >
<script src="main.js"> </script>
  </head>
  <body>
  <div class="jellyfish">
    <div class="head">
        <div class="semihead2">
          </div>
          <div class="insideHead"> </div>
          </div>
          <div class = "legs">
      <div class= "leg1">
        <div class= "up"></div>
     <div class="middle"> </div>
        </div>
        <div class= "leg2">
          <div class= "up"></div>
         <div class="middle"> </div>
          </div>
          <div class= "leg3">
            <div class= "up2"></div>
        <div class="middle2"></div>
          </div>
          <div class= "leg4">
            <div class= "up2"></div>
         <div class="middle2"></div>
           </div>
            </div>
    </div>
</body>
</html>

Kod CSS


body{
  background-color:#000c1a;
}
.up, .middle, .middle2, .up2{
width: 7.5px;
height: 120px;
background-color: white;
position: absolute;
margin: auto;
top: 10px;
right: 60px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
z-index: 1;
left: 0;
bottom: 100px;
}
.middle, .middle2{
  top: 280px;
}
.leg1{
  position: absolute;
  left:0;
  top:0;
  right: 0;
  bottom: 0;
}
 .leg2 {
   position: absolute;
   left: 40px;
   bottom: 0px;
   top: 40px;
   right: 0;

}
.leg3{
  position: absolute;
  left: 80px;
  bottom: 0px;
  top: 40px;
  right: 0;

}
.leg4{
  position: absolute;
  left: 120px;
  bottom: 0px;
  top: 0px;
  right: 0;
}
.insideHead{
  border-bottom: 65px solid white;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    height: 0;
    width: 125px;
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    position: relative;
    margin: auto;
    z-index: -1;
    top: 125px;
}
.semihead2{
  border-top: 30px solid  #e6f2ff;;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    height: 0;
    width: 165px;
    border-bottom-left-radius: 200px;
    border-bottom-right-radius: 200px;
    position: absolute;
    margin: auto;
    opacity: 0.7;
    z-index: 1;
    left: 0;
    right: 0;
    top:0;
    bottom: 305px;
}
.head{
  animation-iteration-count:infinite;
  animation-name: idk;
  animation-duration: 4s;
}
@keyframes idk {
  0%   { transform: scaleY(1) scaleX(1);}
  50%  { transform: scaleY(0.5) scaleX(1.2);}
  100% { transform: scaleY(1) scaleX(1);}
}

I nie rozumiem, dlaczego gdy powyższą animacją animuję div o nazwie head (zawierający w sobie dwa elementy animuje tylko jeden z nich.
Próbowałam zastosować to samo do diva legs i on działał na wszystkie elemety w nim się znajdujące,
Próba przestawienia z - indexów w niczym również nie pomogła

0

Nie wiem, jak dokładnie ma animacja działać, ale wydaje mi się, że tutaj: https://jsfiddle.net/n541k3e8/1/ animują się oba potomki elementu <div class="head">.

1 użytkowników online, w tym zalogowanych: 0, gości: 1