Dalga animasyonu oluşturma

Question

Ses dalgası animasyonunu yapmaya çalışıyorum. Bu kod ile ilgili yanlışlık nedir? Çevirmeyi ölçek olarak değiştirmeyi denedim, ancak çalışmadı. Birisi bana bazı animasyon alıştırmalarına link verebilir mi?

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

dalga, kod çalışıyor ama bir dalga olarak

Answer 1

Yukarı ve yüksekliği yerine transform property hareketlendirerek elemanların hareketi aşağı kaldırabilirsiniz görünmüyor elementler.

Öğeleri Y ekseninde büyütmek için scaleY() işlevini kullanabilirsiniz (yükseklik).

Örnek:

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