console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
body{
margin: 0;
padding: 0;
}
ul{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
}
ul li{
list-style: none;
width: 6px;
height: 20px;
background: #262626;
margin: 0 4px;
animation: animate .7s infinite alternate;
}
@keyframes animate{
0%
{
transform: scaleY;(1);
}
25%
{
transform: scaleY(1);
}
50%
{
transform: scaleY(1);
}
75%
{
transform: scaleY(1);
}
100%
{
transform: scaleY(3);
}
}
ul li:nth-child(1){
animation-delay: .1s;
}
ul li:nth-child(2){
animation-delay: .2s;
}
ul li:nth-child(3){
animation-delay: .3s;
}
ul li:nth-child(4){
animation-delay: .4s;
}
ul li:nth-child(5){
animation-delay: .5s;
}
ul li:nth-child(6){
animation-delay: .6s;
}