Как сделать плавный переход?

Question

[Alexander3928]

Как сделать переход плавный? Элементы перед анимацией прыгают на длину 60%, а хотелось бы, чтобы элементы увеличивались от своей позиции. Как это можно исправить?

<svg class="logo" view-box="0 0 55 40" width="55" height="40" fill="#fff5c3">
      <rect class="logo__rect1" x="7%" y="40%" width="6%" height="20%" rx="2%"></rect>
      <rect class="logo__rect2" x="17%" y="30%" width="6%" height="40%" rx="2%"></rect>
      <rect class="logo__rect3" x="27%" y="20%" width="6%" height="60%" rx="2%"></rect>
      <rect class="logo__rect4" x="37%" y="30%" width="6%" height="40%" rx="2%"></rect>
      <rect class="logo__rect5" x="47%" y="40%" width="6%" height="20%" rx="2%"></rect>
      <rect class="logo__rect6" x="57%" y="30%" width="6%" height="40%" rx="2%"></rect>
      <rect class="logo__rect7" x="67%" y="20%" width="6%" height="60%" rx="2%"></rect>
      <rect class="logo__rect8" x="77%" y="30%" width="6%" height="40%" rx="2%"></rect>
      <rect class="logo__rect9" x="87%" y="40%" width="6%" height="20%" rx="2%"></rect>
    </svg>

.logo:hover rect:nth-child(4n-3) {
  transition: .7s;
  animation: waves .6s linear .1s infinite alternate-reverse;
}

.logo:hover rect:nth-child(even) {
  transition: .9s;
  animation: waves .6s linear .3s infinite alternate-reverse;
}

.logo:hover rect:nth-child(4n-1) {
  transition: 1.2s;
  animation: waves .6s linear .6s infinite alternate-reverse;
}

@keyframes waves {
  0% {
      height: 20%;
      y: 40%;
  }
  100% {
      height: 60%;
      y: 20%;
  }
}

https://codepen.io/Alexxxsander/pen/mdXVPEY

Answer 1

[RAX7]