用C3中的animation和transform写的一个模仿加载的时动画效果

用用C3中的animation和transform写的一个模仿加载的时动画效果！

不多说直接上代码;

html标签部分

<div class="wrap">
<h2>用C3中的animation和transform写的一个模仿加载的时动画效果</h2>
<div class="demo">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

css部分

<style>
.demo{
width:200px;height:30px;
margin:100px auto;

}
.demo div{
float:left;
width:5px;
height:30px;
margin-left:5px;

}
@-webkit-keyframes fluctuation{
20%{
transform:scaleY(0.5);
}
0%,40%,70%,100%{
transform: scaleY(1);
}
}

.demo div:nth-of-type(1){
background:red;
animation: fluctuation 1s 0s ease-out infinite;
}
.demo div:nth-of-type(2){
background:yellow;
animation: fluctuation 1s 0.9s ease infinite;
}
.demo div:nth-of-type(3){
background:blue;
animation: fluctuation 1s 0.6s ease infinite;
}
.demo div:nth-of-type(4){
background:green;
animation: fluctuation 1s 0.4s ease infinite;
}
.demo div:nth-of-type(5){
background:pink;
animation: fluctuation 1s 0s ease infinite;
}
</style>

希望对初学者有点帮助，第一次写博客如有错误或者更好的实现方法欢迎私信。