<div>
  <div class="skinHere">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
:root{
  --multipleHere: 2;
}
body, html{
  margin: 0;
}
html{
  padding: 0;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 15px;
  box-sizing: border-box;
}
.skinHere{
  position: relative;
  height: calc(90px * var(--multipleHere));
  width: calc(75px * var(--multipleHere));
  animation: calc(1s * var(--multipleHere)) moveHere infinite alternate linear;
}
div:has(> .skinHere){
  min-width: calc(130px * var(--multipleHere));
  width: calc(130px * var(--multipleHere));
  max-width: calc(130px * var(--multipleHere));
}
.skinHere > div{
  position: absolute;
}
.skinHere > div:first-child, .skinHere > div:nth-child(2){
  left: 50%;
  transform: translateX(-50%)
}
.skinHere > div:first-child{
  height: calc(15px * var(--multipleHere));
  width: calc(15px * var(--multipleHere));
  border-radius: 50%;
  background: black;
  top: 0;
}
.skinHere > div:nth-child(2){
  background: black;
  top: calc(15px * var(--multipleHere));
  height: calc(30px * var(--multipleHere));
  width: calc(15px * var(--multipleHere));
  border-radius: 5px 5px 0 0;
}
.skinHere > div:nth-child(3), .skinHere > div:nth-child(4){
  background: black;
  top: calc(15px * var(--multipleHere));
  height: calc(30px * var(--multipleHere));
  width: calc(5px * var(--multipleHere));
  border-radius: 3px;
}
.skinHere > div:nth-child(3){
  left: calc(27px * var(--multipleHere));
  transform: rotate(25deg) translateX(-50%);
  animation: 1s skinThreeHere infinite alternate;
}
.skinHere > div:nth-child(4){
  right: calc(27px * var(--multipleHere));
  transform: rotate(-25deg) translateX(50%);
  animation: 1s skinForHere infinite alternate;
}

.skinHere > div:nth-child(5), .skinHere > div:nth-child(6){
  width: calc(5px * var(--multipleHere));
  height: calc(25px * var(--multipleHere));
  background: black;
  top: calc(45px * var(--multipleHere));
  animation: 1s scaleHere alternate infinite;
}
.skinHere > div:nth-child(5){
  left: calc(39px * var(--multipleHere));
  animation-delay: 0.5s;
}
.skinHere > div:nth-child(6){
  left: calc(31px * var(--multipleHere));
}
@keyframes moveHere{
  from{
    left: 0;
  }
  to{
    left: calc(55px * var(--multipleHere));
  }
}
@keyframes skinThreeHere{
  from{
    transform: rotate(25deg) translateX(-50%);
  }
  to{
    transform: rotate(0deg) translateX(50%);
  }
}
@keyframes skinForHere{
  from{
    transform: rotate(-25deg) translateX(50%);
  }
  to{
    transform: rotate(-0deg) translateX(-50%);
  }
}
@keyframes scaleHere{
  to{
    height: 0;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.