एक लहर एनीमेशन बनाना

Question

मैं ऑडियो तरंग एनीमेशन बनाने की कोशिश कर रहा हूं। इस कोड के साथ क्या समस्या है? मैंने अनुवाद को स्केल करने की कोशिश की लेकिन यह काम नहीं किया। क्या कोई मुझे एनीमेशन के कुछ अभ्यासों के लिए एक लिंक दे सकता है?

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

लहर, कोड काम कर रहा है, लेकिन यह एक लहर के रूप

Answer 1

इसे तुरंत शुरू करके की ऊंचाई का transform property एनिमेट बजाय द्वारा नीचे तत्वों की आवाजाही को हटा सकते हैं प्रकट नहीं होता है अवयव।

आप वाई अक्ष (ऊंचाई) पर तत्वों को विकसित करने के लिए scaleY() फ़ंक्शन का उपयोग कर सकते हैं।

उदाहरण:

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