1 <style>
2 html,body{
3 margin: 100px;
4 padding: 0;
5 width: 100%;
6 height: 100%;
7 background: #ed5565;
8 }
9 .ball-clip-rotate>div{
10 background: #fff;
11 /*//动画前的大小*/
12 width: 15px;
13 height: 15px;
14 border-radius:100%;
15 margin: 2px;
16 -webkit-animation-fill-mode:both;
17 animation-fill-mode:both;
18 border:2px solid #fff;
19 /*border-bottom-color是用来留旋转时候的缺口的*/
20 border-bottom-color:transparent;
21 height: 25px;
22 width: 25px;
23 background: transparent;
24 -webkit-animation:rotate .75s 0s linear infinite;
25 animationn:rotate .75s 0s linear infinite;
26 }
27 @keyframes rotate {
28 0%{
29 transform:rotate(0deg) scale(1)
30 }
31 50%{
32 transform: rotate(180deg) scale(.6);
33 }
34 100%{
35 transform: rotate(360deg) scale(1);
36 }
37 }
38
39 </style>
40
41 <div class="loader-inner ball-clip-rotate">
42 <div></div>
43 </div>
1 //html
2 <div class="loader">
3 <div class="loader-inner ball-pulse">
4 <div></div>
5 <div></div>
6 <div></div>
7 </div>
8 </div>
9 //css
10 @keyframes scale {
11 30% {
12 -webkit-transform: scale(0.3);
13 transform: scale(0.3); }
14
15 100% {
16 -webkit-transform: scale(1);
17 transform: scale(1); } }
18 .ball-pulse > div:nth-child(0) {
19 -webkit-animation: scale 0.75s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
20 animation: scale 0.75s 0s infinite cubic-bezier(.2, .68, .18, 1.08); }
21 .ball-pulse > div:nth-child(1) {
22 -webkit-animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
23 animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08); }
24 .ball-pulse > div:nth-child(2) {
25 -webkit-animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
26 animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08); }
27 .ball-pulse > div:nth-child(3) {
28 -webkit-animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
29 animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08); }
30 .ball-pulse > div {
31 background-color: #fff;
32 width: 15px;
33 height: 15px;
34 border-radius: 100%;
35 margin: 2px;
36 -webkit-animation-fill-mode: both;
37 animation-fill-mode: both;
38 display: inline-block; } 
1 <style>
2 html,body{
3 margin: 100px;
4 padding: 0;
5 width: 100%;
6 height: 100%;
7 background: #ed5565;
8 }
9
10 @-webkit-keyframes ball-grid-pulse {
11 0% {
12 -webkit-transform: scale(1);
13 transform: scale(1); }
14
15 50% {
16 -webkit-transform: scale(0.5);
17 transform: scale(0.5);
18 opacity: 0.7; }
19
20 100% {
21 -webkit-transform: scale(1);
22 transform: scale(1);
23 opacity: 1; } }
24
25 @keyframes ball-grid-pulse {
26 0% {
27 -webkit-transform: scale(1);
28 transform: scale(1); }
29
30 50% {
31 -webkit-transform: scale(0.5);
32 transform: scale(0.5);
33 opacity: 0.7; }
34
35 100% {
36 -webkit-transform: scale(1);
37 transform: scale(1);
38 opacity: 1; } }
39
40 .ball-grid-pulse {
41 width: 57px; }
42 .ball-grid-pulse > div:nth-child(1) {
43 -webkit-animation-delay: -0.06s;
44 animation-delay: -0.06s;
45 -webkit-animation-duration: 0.72s;
46 animation-duration: 0.72s; }
47 .ball-grid-pulse > div:nth-child(2) {
48 -webkit-animation-delay: 0.25s;
49 animation-delay: 0.25s;
50 -webkit-animation-duration: 1.02s;
51 animation-duration: 1.02s; }
52 .ball-grid-pulse > div:nth-child(3) {
53 -webkit-animation-delay: -0.17s;
54 animation-delay: -0.17s;
55 -webkit-animation-duration: 1.28s;
56 animation-duration: 1.28s; }
57 .ball-grid-pulse > div:nth-child(4) {
58 -webkit-animation-delay: 0.48s;
59 animation-delay: 0.48s;
60 -webkit-animation-duration: 1.42s;
61 animation-duration: 1.42s; }
62 .ball-grid-pulse > div:nth-child(5) {
63 -webkit-animation-delay: 0.31s;
64 animation-delay: 0.31s;
65 -webkit-animation-duration: 1.45s;
66 animation-duration: 1.45s; }
67 .ball-grid-pulse > div:nth-child(6) {
68 -webkit-animation-delay: 0.03s;
69 animation-delay: 0.03s;
70 -webkit-animation-duration: 1.18s;
71 animation-duration: 1.18s; }
72 .ball-grid-pulse > div:nth-child(7) {
73 -webkit-animation-delay: 0.46s;
74 animation-delay: 0.46s;
75 -webkit-animation-duration: 0.87s;
76 animation-duration: 0.87s; }
77 .ball-grid-pulse > div:nth-child(8) {
78 -webkit-animation-delay: 0.78s;
79 animation-delay: 0.78s;
80 -webkit-animation-duration: 1.45s;
81 animation-duration: 1.45s; }
82 .ball-grid-pulse > div:nth-child(9) {
83 -webkit-animation-delay: 0.45s;
84 animation-delay: 0.45s;
85 -webkit-animation-duration: 1.06s;
86 animation-duration: 1.06s; }
87 .ball-grid-pulse > div {
88 background-color: #fff;
89 width: 15px;
90 height: 15px;
91 border-radius: 100%;
92 margin: 2px;
93 -webkit-animation-fill-mode: both;
94 animation-fill-mode: both;
95 display: inline-block;
96 float: left;
97 -webkit-animation-name: ball-grid-pulse;
98 animation-name: ball-grid-pulse;
99 -webkit-animation-iteration-count: infinite;
100 animation-iteration-count: infinite;
101 -webkit-animation-delay: 0;
102 animation-delay: 0; }
103
104 </style>
105
106
107 <div class="loader">
108 <div class="loader-inner ball-grid-pulse">
109 <div></div>
110 <div></div>
111 <div></div>
112 <div></div>
113 <div></div>
114 <div></div>
115 <div></div>
116 <div></div>
117 <div></div>
118 </div>
119 </div>
1 html,body{
2 margin: 100px;
3 padding: 0;
4 width: 100%;
5 height: 100%;
6 background: #ed5565;
7 }
8
9 @keyframes scale {
10 30% {
11 -webkit-transform: scale(0.3);
12 transform: scale(0.3); }
13
14 100% {
15 -webkit-transform: scale(1);
16 transform: scale(1); }
17 }
18 @keyframes rotate {
19 0% {
20 -webkit-transform: rotate(0deg) scale(1);
21 transform: rotate(0deg) scale(1); }
22
23 50% {
24 -webkit-transform: rotate(180deg) scale(0.5);
25 transform: rotate(180deg) scale(0.5); }
26
27 100% {
28 -webkit-transform: rotate(360deg) scale(1);
29 transform: rotate(360deg) scale(1); } }
30 .ball-clip-rotate-pulse{
31 position: relative;
32 /*translateY是Y轴移动15度*/
33 -webkit-transform: translateY(-15px);
34 -ms-transform: translateY(-15px);
35 transform: translateY(-15px);
36 }
37 .ball-clip-rotate-pulse>div{
38 -webkit-animation-fill-mode: both;
39 animation-fill-mode: both;
40 position: absolute;
41 top: 0px;
42 left: 0px;
43 border-radius: 100%;
44 }
45 .ball-clip-rotate-pulse > div:first-child {
46 background: #fff;
47 height: 16px;
48 width: 16px;
49 top: 9px;
50 left: 9px;
51 -webkit-animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
52 animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite; }
53 .ball-clip-rotate-pulse>div:last-child{
54 position: absolute;
55 width: 30px;
56 height: 30px;
57 background: transparent;
58 border:2px solid;
59 border-color: #fff transparent #fff transparent;
60 -webkit-animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
61 animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
62 -webkit-animation-duration: 1s;
63 animation-duration: 1s;
64
65 }
66
67
68
69 <div class="loader-inner ball-clip-rotate-pulse">
70 <div></div>
71 <div></div>
72 </div>
1 @-webkit-keyframes square-spin {
2 25% {
3 -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
4 transform: perspective(100px) rotateX(180deg) rotateY(0);
5 }
6
7 50% {
8 -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
9 transform: perspective(100px) rotateX(180deg) rotateY(180deg);
10 }
11
12 75% {
13 -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
14 transform: perspective(100px) rotateX(0) rotateY(180deg);
15 }
16
17 100% {
18 -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
19 transform: perspective(100px) rotateX(0) rotateY(0);
20 }
21 }
22
23 @keyframes square-spin {
24 25% {
25 -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
26 transform: perspective(100px) rotateX(180deg) rotateY(0);
27 }
28
29 50% {
30 -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
31 transform: perspective(100px) rotateX(180deg) rotateY(180deg);
32 }
33
34 75% {
35 -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
36 transform: perspective(100px) rotateX(0) rotateY(180deg);
37 }
38
39 100% {
40 -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
41 transform: perspective(100px) rotateX(0) rotateY(0);
42 }
43 }
44 .square-spin >div{
45 -webkit-animation-fill-mode: both;
46 animation-fill-mode:both;
47 width: 50px;
48 height: 50px;
49 background: #fff;
50 border:1px solid red;
51 -webkit-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
52 animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
53 }
54
55
56 <div class="loader">
57 <div class="loader-inner square-spin">
58 <div></div>
59 </div>
60 </div> 
1 @keyframes rotate {
2 0% {
3 -webkit-transform: rotate(0deg) scale(1);
4 transform: rotate(0deg) scale(1);
5 }
6
7 50% {
8 -webkit-transform: rotate(180deg) scale(0.6);
9 transform: rotate(180deg) scale(0.6);
10 }
11
12 100% {
13 -webkit-transform: rotate(360deg) scale(1);
14 transform: rotate(360deg) scale(1);
15 }
16 }
17 .ball-clip-rotate-multiple{
18 position: relative;
19 }
20 .ball-clip-rotate-multiple>div{
21 -webkit-animation-fill-mode: both;
22 animation-fill-mode:both;
23 position: absolute;
24 left: 0;
25 top: 0;
26 border:2px solid #fff;
27 border-bottom-color: transparent;
28 border-top-color: transparent;
29 border-radius: 100%;
30 height: 35px;
31 width: 35px;
32 /*里外两个的动画在一起*/
33 -webkit-animation:rotate 1s 0s ease-in-out infinite;
34 animation:rotate 1s 0s ease-in-out infinite;
35 }
36 .ball-clip-rotate-multiple>div:last-child{
37 top: 10px;
38 left: 10px;
39 width: 15px;
40 height: 15px;
41 border-color: #fff transparent #fff transparent;
42 -webkit-animation-duration: .5s;
43 animation-duration: .5s;
44 -webkit-animation-direction:reverse;
45 animation-direction: reverse;
46
47 }
48
49
50
51 <div class="loader-inner ball-clip-rotate-multiple">
52 <div></div>
53 <div></div>
54 </div>
1 <div class="loader">
2 <div class="loader-inner ball-pulse-rise">
3 <div></div>
4 <div></div>
5 <div></div>
6 <div></div>
7 <div></div>
8 </div>
9 </div>
10
11
12
13 /*奇数*/
14 @-webkit-keyframes ball-pulse-rise-odd {
15 0% {
16 -webkit-transform: scale(0.4);
17 transform: scale(0.4);
18 }
19
20 25% {
21 -webkit-transform: translateY(30px);
22 transform: translateY(30px);
23 }
24
25 50% {
26 -webkit-transform: scale(1.1);
27 transform: scale(1.1);
28 }
29
30 75% {
31 -webkit-transform: translateY(-30px);
32 transform: translateY(-30px);
33 }
34
35 100% {
36 -webkit-transform: translateY(0);
37 transform: translateY(0);
38 -webkit-transform: scale(0.75);
39 transform: scale(0.75);
40 }
41 }
42 @keyframes ball-pulse-rise-odd {
43 0% {
44 -webkit-transform: scale(0.4);
45 transform: scale(0.4);
46 }
47
48 25% {
49 -webkit-transform: translateY(30px);
50 transform: translateY(30px);
51 }
52
53 50% {
54 -webkit-transform: scale(1.1);
55 transform: scale(1.1);
56 }
57
58 75% {
59 -webkit-transform: translateY(-30px);
60 transform: translateY(-30px);
61 }
62
63 100% {
64 -webkit-transform: translateY(0);
65 transform: translateY(0);
66 -webkit-transform: scale(0.75);
67 transform: scale(0.75);
68 }
69 }
70 /*偶数*/
71 @-webkit-keyframes ball-pulse-rise-even {
72 0% {
73 -webkit-transform: scale(1.1);
74 transform: scale(1.1);
75 }
76
77 25% {
78 -webkit-transform: translateY(-30px);
79 transform: translateY(-30px);
80 }
81
82 50% {
83 -webkit-transform: scale(0.4);
84 transform: scale(0.4);
85 }
86
87 75% {
88 -webkit-transform: translateY(30px);
89 transform: translateY(30px);
90 }
91
92 100% {
93 -webkit-transform: translateY(0);
94 transform: translateY(0);
95 -webkit-transform: scale(1);
96 transform: scale(1);
97 }
98 }
99 @keyframes ball-pulse-rise-even {
100 0% {
101 -webkit-transform: scale(1.1);
102 transform: scale(1.1);
103 }
104
105 25% {
106 -webkit-transform: translateY(-30px);
107 transform: translateY(-30px);
108 }
109
110 50% {
111 -webkit-transform: scale(0.4);
112 transform: scale(0.4);
113 }
114
115 75% {
116 -webkit-transform: translateY(30px);
117 transform: translateY(30px);
118 }
119
120 100% {
121 -webkit-transform: translateY(0);
122 transform: translateY(0);
123 -webkit-transform: scale(1);
124 transform: scale(1);
125 }
126 }
127 .ball-pulse-rise > div{
128 width: 15px;
129 height: 15px;
130 background: #fff;
131 border-radius: 100%;
132 margin: 2px;
133 display: inline-block;
134 -webkit-animation-fill-mode: both;
135 animation-fill-mode:both;
136 -webkit-animation-duration: 1s;
137 animation-duration: 1s;
138 -webkit-animation-timing-function: cubic-bezier(.15, .46, .9, .6);
139 animation-timing-function: cubic-bezier(.15, .46, .9, .6);
140 -webkit-animation-iteration-count: infinite;
141 animation-iteration-count: infinite;
142 -webkit-animation-delay:0;
143 animation-delay:0;
144 }
145 .ball-pulse-rise >div:nth-child(2n){
146 -webkit-animation-name:bull-pulse-rise-even;
147 animation-name: ball-pulse-rise-even;
148 }
149 .ball-pulse-rise > div:nth-child(2n-1) {
150 -webkit-animation-name: ball-pulse-rise-odd;
151 animation-name: ball-pulse-rise-odd;
152 }
来源：oschina
链接：https://my.oschina.net/u/4289621/blog/3876314