Music beats css animation ( source code )

Music beats css animation ( source code )

HTML

<div class="wrapper"> <div class="line1"> </div> <div class="line2"> </div> <div class="line3"> </div> <div class="line4"> </div> <div class="line5"> </div> <div class="line6"> </div> <div class="line7"> </div> </div>

CSS


body{ background: linear-gradient(to left, #B1E0AD, #2EB2C9); } .wrapper{ width: 500px; position: absolute; top: 20%; left: 50%; transform: translate(-50%,-50%); } div{ width:30px; height:60px; animation-iteration-count:infinite; animation-iteration-function:linear; position:fixed; } div.line1{ background-color:#787878; animation:animate1 1.9s linear infinite ; top:200px ; left:60px ; } div.line2{ background-color:#787878; animation:animate2 2.1s linear infinite; top:200px ; left:95px ; } div.line3{ background-color:#787878; animation:animate3 2.3s linear infinite; top:200px ; left:130px ; } div.line4{ background-color:#787878; animation:animate4 1.4s linear infinite; top: 200px; left: 165px ; } div.line5{ background-color:#787878; animation:animate5 1.7s linear infinite ; top: 200px; left:200px ; } div.line6{ background-color:#787878; animation:animate6 2.0s linear infinite; top: 200px; left:235px ; } div.line7{ background-color:#787878; animation:animate7 1.8s linear infinite; top:200px ; left: 270px; } @keyframes animate1{ 50%{ background-color:#000; top:100px; height:160px;} } @keyframes animate2{ 50%{background-color:#000;top:50px;height:210px;} } @keyframes animate3{ 50%{background-color:#000; top:10px; height:250px;} } @keyframes animate4{ 50%{background-color:#000; top:100px; height:160px;} } @keyframes animate5{ 50%{background-color:#000; top:50px; height:210px;} } @keyframes animate6{ 50%{background-color:#000; top:150px; height:110px;} } @keyframes animate7{ 50%{background-color:#000; top:50px; height:210px;} }