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}
}
值得注意的点，其实都非常基础，父元素相对定位，子元素绝对定位，然后绝对不要将相同的动画分开写，可以分开来控制不同的状态，例如延迟，如果要达到两端都收缩的效果，就得给收缩时加上margin
html
<div class="box">
<span id="one"></span>
<span id="two"></span>
<span id="three"></span>
</div>
效果图如下
loading.gif
（2）翻转的方块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方块翻转</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)}
/* 每一帧都是在上一帧的基础上进行变化，所以需要保持状态，控制变化与不变 */
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
loading.gif
