I'm trying to make an animation sound like an audio wave. What is wrong with this code?

I try to apply - translate to scale , but it does not help.
Can anyone give me a link to some animation examples?

 * { -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>

Translation question: Making a wave animation @ LCTS

1 answer 1

You can remove moving elements up and down by animating the transform: translateY property, instead of the height of the elements.
And also use the scaleY() function to increase the height of elements along the Y axis.

Code 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>

Translation of the answer: Making a wave animation @ web-tiki