写几个简单的加载中动画吧。
像前面三种都是相当于几个不同的点轮流来播放同一动画：变大变小。css3里面有一个用于尺度变换的方法：scale(x,y)：定义 2D 缩放转换，改变元素的宽度和高度。
第四种就是一个小球从上往下跌落，再弹回去，在上面的时候速度最小，下面的时候速度最大。由于该小球只进行了上下的移动，所以我们可以运用：translateY(n)：定义 2D 转换，沿着 Y 轴移动元素，从而实现小球沿Y方向来回移动。
废话不多说了，上代码。
首先，第一个加载中的动画：
1 <div id="loading1">2 ????????<div class="demo1"></div>3 ????????<div class="demo1"></div>4 ????????<div class="demo1"></div>5 ????????<div class="demo1"></div>6 ????????<div class="demo1"></div>7 </div>
1 .demo1 { 2 ????width: 4px; 3 ????height: 4px; 4 ????border-radius: 2px; 5 ????background: #68b2ce; 6 ????float: left; 7 ????margin: 0 3px; 8 ????animation: demo1 linear 1s infinite; 9 ????-webkit-animation: demo1 linear 1s infinite;10 }11 .demo1:nth-child(1){12 ????animation-delay:0s;13 }14 .demo1:nth-child(2){15 ????animation-delay:0.15s;16 }17 .demo1:nth-child(3){18 ????animation-delay:0.3s;19 }20 .demo1:nth-child(4){21 ????animation-delay:0.45s;22 }23 .demo1:nth-child(5){24 ????animation-delay:0.6s;25 }26 @keyframes demo1 27 {28 ????0%,60%,100% {transform: scale(1);}29 ????30% {transform: scale(2.5);}30 }31 @-webkit-keyframes demo1 32 {33 ????0%,60%,100% {transform: scale(1);}34 ????30% {transform: scale(2.5);}35 }第二个动画和第一个动画大同小异，第一个动画是将小球整体变大变小，第二动画则是将小方块的高度变大变小，而宽度不变：
1 <div id="loading2">2 ????<div class="demo2"></div>3 ????<div class="demo2"></div>4 ????<div class="demo2"></div>5 ????<div class="demo2"></div>6 ????<div class="demo2"></div>7 </div>
1 .demo2 { 2 ????width: 4px; 3 ????height: 6px; 4 ????background: #68b2ce; 5 ????float: left; 6 ????margin: 0 3px; 7 ????animation: demo2 linear 1s infinite; 8 ????-webkit-animation: demo2 linear 1s infinite; 9 }10 .demo2:nth-child(1){11 ????animation-delay:0s;12 }13 .demo2:nth-child(2){14 ????animation-delay:0.15s;15 }16 .demo2:nth-child(3){17 ????animation-delay:0.3s;18 }19 .demo2:nth-child(4){20 ????animation-delay:0.45s;21 }22 .demo2:nth-child(5){23 ????animation-delay:0.6s;24 }25 @keyframes demo2 26 {27 ????0%,60%,100% {transform: scale(1);}28 ????30% {transform: scaleY(3);}29 }30 @-webkit-keyframes demo2 31 {32 ????0%,60%,100% {transform: scale(1);}33 ????30% {transform: scaleY(3);}34 }第三个动画就需要将小球的位置定位一下，让几个小球整体上看起来围成一个圆，然后就像第一个一样使小球变大变小：
1 <div id="loading3"> 2 ?????<div class="demo3"></div> 3 ?????<div class="demo3"></div> 4 ?????<div class="demo3"></div> 5 ?????<div class="demo3"></div> 6 ?????<div class="demo3"></div> 7 ?????<div class="demo3"></div> 8 ?????<div class="demo3"></div> 9 ?????<div class="demo3"></div>10 </div>
1 #loading3 { 2 ????position: relative; 3 ????width: 50px; 4 ????height: 50px; 5 } 6 .demo3 { 7 ????width: 4px; 8 ????height: 4px; 9 ????border-radius: 2px;10 ????background: #68b2ce;11 ????position: absolute;12 ????animation: demo3 linear 0.8s infinite;13 ????-webkit-animation: demo3 linear 0.8s infinite;14 }15 .demo3:nth-child(1){16 ????left: 24px;17 ????top: 2px;18 ????animation-delay:0s;19 }20 .demo3:nth-child(2){21 ????left: 40px;22 ????top: 8px;23 ????animation-delay:0.1s;24 }25 .demo3:nth-child(3){26 ????left: 47px;27 ????top: 24px;28 ????animation-delay:0.1s;29 }30 .demo3:nth-child(4){31 ????left: 40px;32 ????top: 40px;33 ????animation-delay:0.2s;34 }35 .demo3:nth-child(5){36 ????left: 24px;37 ????top: 47px;38 ????animation-delay:0.4s;39 }40 .demo3:nth-child(6){41 ????left: 8px;42 ????top: 40px;43 ????animation-delay:0.5s;44 }45 .demo3:nth-child(7){46 ????left: 2px;47 ????top: 24px;48 ????animation-delay:0.6s;49 }50 .demo3:nth-child(8){51 ????left: 8px;52 ????top: 8px;53 ????animation-delay:0.7s;54 }55 56 @keyframes demo3 57 {58 ????0%,40%,100% {transform: scale(1);}59 ????20% {transform: scale(3);}60 }61 @-webkit-keyframes demo3 62 {63 ????0%,40%,100% {transform: scale(1);}64 ????20% {transform: scale(3);}65 }接下来是第四个动画：
1 <div id="loading5">2 ?????<div class="demo5"></div>3 </div>
1 #loading5 { 2 ????width: 20px; 3 ????height: 100px; 4 ????border-bottom: 1px solid #68b2ce; 5 } 6 .demo5 { 7 ????width: 20px; 8 ????height: 20px; 9 ????border-radius: 10px;10 ????background: #68b2ce;11 ????animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate;12 ????-webkit-animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate;13 }14 @keyframes demo515 {16 ????0%{17 ????????transform:translateY(0px);18 ????????-webkit-transform:translateY(0px);19 ????}20 ????100% {21 ????????transform:translateY(80px);22 ????????-webkit-transform:translateY(80px);23 ????}24 }25 @-webkit-keyframes demo526 {27 ????0%{28 ????????transform:translateY(0px);29 ????????-webkit-transform:translateY(0px);30 ????}31 ????100% {32 ????????transform:translateY(80px);33 ????????-webkit-transform:translateY(80px);34 ????}35 }以上就是这几个简单的加载中小动画的内容了。
css3动画-加载中...
原文地址：http://www.cnblogs.com/tangchan/p/7604594.html