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