how to make wave animation?

Question

I want to make a wave. There is sample animation that i made. so i want to change this animation like this. there is number of rectangles. Expanding both sides of the rectangle

• What i want to do is this time rectangle is expanding both sides(Up & down sides) but i want to expand only on side(up side) like music player.

 * { -webkit-box-sizing: border-box; box-sizing: border-box; } div { width: 1300px; height: 300px; margin: 100px auto; } span { display: inline-block; background-color: green; width: 20px; height: 20px; animation: wave 1s linear infinite; }.a1 { animation-delay: .0s; }.a2 { animation-delay: .2s; }.a3 { animation-delay: .3s; }.a4 { animation-delay: .4s; }.a5 { animation-delay: .5s; }.a6 { animation-delay: .6s; }.a7 { animation-delay: .7s; }.a8 { animation-delay: .8s; }.a9 { animation-delay: .9s; }.a10 { animation-delay: 1.0s; } @keyframes wave { 50%{ transform: scaleY(80); transform: scaleY(5); } }

 <div> <span class="a1"></span> <span class="a2"></span> <span class="a3"></span> <span class="a4"></span> <span class="a5"></span> <span class="a6"></span> <span class="a7"></span> <span class="a8"></span> <span class="a9"></span> <span class="a10"></span> </div>

Answer 1

Just set the transform-origin of the span to bottom center (default is center center ).

 * { -webkit-box-sizing: border-box; box-sizing: border-box; } div { width: 1300px; height: 300px; margin: 100px auto; } span { display: inline-block; background-color: green; width: 20px; height: 20px; animation: wave 1s linear infinite; transform-origin: bottom center; }.a1 { animation-delay: .0s; }.a2 { animation-delay: .2s; }.a3 { animation-delay: .3s; }.a4 { animation-delay: .4s; }.a5 { animation-delay: .5s; }.a6 { animation-delay: .6s; }.a7 { animation-delay: .7s; }.a8 { animation-delay: .8s; }.a9 { animation-delay: .9s; }.a10 { animation-delay: 1.0s; } @keyframes wave { 50% { transform: scaleY(80); transform: scaleY(5); } }

 <div> <span class="a1"></span> <span class="a2"></span> <span class="a3"></span> <span class="a4"></span> <span class="a5"></span> <span class="a6"></span> <span class="a7"></span> <span class="a8"></span> <span class="a9"></span> <span class="a10"></span> </div>