Creazione di un'animazione ad onda

Question

Sto provando a realizzare l'animazione delle onde audio. Cosa c'è di sbagliato con questo codice? Ho provato a cambiare tradurre in scala ma non ha funzionato. Qualcuno potrebbe darmi un link ad alcuni esercizi di animazione?

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

onda, codice funzioni ma non appare come un'onda

Answer 1

è possibile rimuovere il su e giù movimento degli elementi tramite un'animazione transform property invece dell'altezza gli elementi.

È possibile utilizzare la funzione scaleY() per far crescere gli elementi sull'asse Y (altezza).

Esempio:

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