css
.box{
width: 200px;
height: 100px;
margin: 100px auto;
position: relative;
}
.box span{
width: 20px;
height: 80px;
position: absolute;
background-color: green;
top: 10px;
animation: aone 1s linear infinite;
}
.box span:nth-child(1){
left: 50px;
/*transition: all;*/
}
.box span:nth-child(2){
left: 90px;
animation-delay: 0.2s;
}
.box span:nth-child(3){
left: 130px;
animation-delay: 0.4s;
}
@keyframes aone{
0%{height: 80px;opacity: 1}
50%{height: 40px;margin:20px 0;opacity: 0.5}
100%{height: 80px;opacity: 1}
}
值得注意的點崭添，其實都非吃⒚洌基礎(chǔ)，父元素相對定位呼渣，子元素絕對定位棘伴，然后絕對不要將相同的動畫分開寫，可以分開來控制不同的狀態(tài)屁置，例如延遲焊夸，如果要達到兩端都收縮的效果，就得給收縮時加上margin
html
<div class="box">
<span id="one"></span>
<span id="two"></span>
<span id="three"></span>
</div>
效果圖如下
loading.gif
（2）翻轉(zhuǎn)的方塊loading
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css3-loading方塊翻轉(zhuǎn)</title>
<style>
.square{
width: 50px;
height: 50px;
background-color: orangered;
animation-name:squareRotate;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes squareRotate{
0%{transform: rotateX(0deg) rotateY(0deg);}
25%{transform: perspective(100px) rotateX(180deg) rotateY(0deg);}
50%{transform: perspective(100px) rotateX(180deg) rotateY(180deg);}
75%{transform: perspective(100px) rotateX(360deg) rotateY(180deg)}
100%{transform: perspective(100px) rotateX(360deg) rotateY(360deg)}
/* 每一幀都是在上一幀的基礎(chǔ)上進行變化蓝角，所以需要保持狀態(tài)阱穗，控制變化與不變 */
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
loading.gif
