Making a wave animation

Question

I am trying to make audio wave animation. What is wrong with this code? I tried to change translate to scale but it didn't work. Could someone give me a link to some exercises of animation?

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
div {
  width: 400px;
  height: 200px;
  margin: 50px auto;
}
span {
  display: inline-block;
  background-color: green;
  width: 20px;
  height: 20px;
  animation: wave 2s linear infinite;
}
.a1 {
  animation-delay: 0s;
}
.a2 {
  animation-delay: .2s;
}
.a3 {
  animation-delay: .4s;
}
.a4 {
  animation-delay: .6s;
}
.a5 {
  animation-delay: .8s;
}
@keyframes wave {
  0%, 50%, 75%, 100% {
    height: 5px;
    transform: translateY(0px);
  }
  25% {
    height: 30px;
    transform: translateY(15px);
    background-color: palevioletred;
  }
}

<div>
  <span class="a1"></span>
  <span class="a2"></span>
  <span class="a3"></span>
  <span class="a4"></span>
  <span class="a5"></span>
</div>

wave , code is working but it does not appear as a wave

Answer 1

You can remove the up and down movement of the elements by animating the transform property instead of the height of the elements.

You can use the scaleY() function to make the elements grow on the Y axis (height).

Example :

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
div {
  width: 400px;
  height: 200px;
  margin: 50px auto;
}
span {
  display: inline-block;
  background-color: green;
  width: 20px;
  height: 20px;
  animation: wave 2s linear infinite;
}
.a1 {
  animation-delay: 0s;
}
.a2 {
  animation-delay: .2s;
}
.a3 {
  animation-delay: .4s;
}
.a4 {
  animation-delay: .6s;
}
.a5 {
  animation-delay: .8s;
}
@keyframes wave {
  0%, 50%{
    transform: scaleY(1);
  }
  25% {
    transform: scaleY(4);
    background-color: palevioletred;
  }
}

<div>
  <span class="a1"></span>
  <span class="a2"></span>
  <span class="a3"></span>
  <span class="a4"></span>
  <span class="a5"></span>
</div>