css3过渡动画
<style>
.box{
width: 225px;
height: 200px;
margin: 50px auto;/*元素在父元素里面水平居中*/
}
.item{
float: left;/*让元素从左到右在一行排列*/
width: 10px;
height: 100px;
background-color: #999;
border-radius: 5px;
margin:0 2.5px;
transform: scale(1,0.2);
/*
外边距
margin:5px 10px; 上下 左右
margin-top
margin-bottom
margin-left
margin-right
*/
}
.first{
animation: scale 2s linear infinite alternate;
}
.second{
animation: scale 2s 0.3s linear infinite alternate;
}
.third{
animation: scale 2s 0.6s linear infinite alternate;
}
.fourth{
animation: scale 2s 0.9s linear infinite alternate;
}
.fifth{
animation: scale 2s 1.2s linear infinite alternate;
}
.sixth{
animation: scale 2s 1.5s linear infinite alternate;
}
.seventh{
animation: scale 2s 1.8s linear infinite alternate;
}
.eighth{
animation: scale 2s 2.1s linear infinite alternate;
}
@keyframes scale {
0%{
transform: scale(1,0.2);
background-color: #999;
}
100%{
transform: scale(1,1);
background-color: #333;
}
}
</style>
<body>
<div class="box">
<div class="item eighth"></div>
<div class="item seventh"></div>
<div class="item sixth"></div>
<div class="item fifth"></div>
<div class="item fourth"></div>
<div class="item third"></div>
<div class="item second"></div>
<div class="item first"></div>
<div class="item second"></div>
<div class="item third"></div>
<div class="item fourth"></div>
<div class="item fifth"></div>
<div class="item sixth"></div>
<div class="item seventh"></div>
<div class="item eighth"></div>
</div>
</body>
