How to create audio player equalizer using html&css3 animation?

I am trying to create audio player equalizer but animate to downward side ?the code is below in the answer?I want that animation to upward side?

html css css3 animation

27th Feb 2017, 7:16 AM

kundan

2 Answers

+ 5

#main{width:600px;height:200px;background:red;position:relative;} /* outter -> position:relative; -> create a positionement context */ #m1{width:25px; height:15px; background:blue; position:absolute; /* inner -> position:absolute; -> position relatively to parent context */ -webkit-animation: m1 1s linear infinite; } @-webkit-keyframes m1{ from{bottom:0;left:10px;} /* bottom instead top */ to{bottom:0;left:10px;width:25px;height:100px} }

27th Feb 2017, 7:58 AM

visph

Kundan Dalvi: <!DOCTYPE html> <html> <head> <style> #main{width:600px;height:200px;background:red;position:absolute;} #m1{width:25px; height:15px; background:blue; position:relative; -webkit-animation: m1 1s linear infinite; } @-webkit-keyframes m1{ from{top:185px;left:10px;} to{top:185px;left:10px;width:25px;height:100px} } </style> </head> <body> <div id="main"> <div id="m1"></div> </div> </body> </html>

27th Feb 2017, 7:16 AM

kundan