1 /**********************
\r
3 *http://codepen.io/vivinantony
\r
4 ***********************/
\r
12 .double-bounce1, .double-bounce2 {
\r
16 background-color: #fff;
\r
22 -webkit-animation: bounce 2.0s infinite ease-in-out;
\r
23 animation: bounce 2.0s infinite ease-in-out;
\r
27 -webkit-animation-delay: -1.0s;
\r
28 animation-delay: -1.0s;
\r
31 @-webkit-keyframes bounce {
\r
32 0%, 100% { -webkit-transform: scale(0.0) }
\r
33 50% { -webkit-transform: scale(1.0) }
\r
38 transform: scale(0.0);
\r
39 -webkit-transform: scale(0.0);
\r
41 transform: scale(1.0);
\r
42 -webkit-transform: scale(1.0);
\r
53 .container1 > div, .container2 > div, .container3 > div {
\r
56 background-color: #fff;
\r
58 border-radius: 100%;
\r
60 -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
\r
61 animation: bouncedelay 1.2s infinite ease-in-out;
\r
62 /* Prevent first frame from flickering when animation starts */
\r
63 -webkit-animation-fill-mode: both;
\r
64 animation-fill-mode: both;
\r
67 .spinner2 .spinner-container {
\r
74 -webkit-transform: rotateZ(45deg);
\r
75 transform: rotateZ(45deg);
\r
79 -webkit-transform: rotateZ(90deg);
\r
80 transform: rotateZ(90deg);
\r
83 .circle1 { top: 0; left: 0; }
\r
84 .circle2 { top: 0; right: 0; }
\r
85 .circle3 { right: 0; bottom: 0; }
\r
86 .circle4 { left: 0; bottom: 0; }
\r
88 .container2 .circle1 {
\r
89 -webkit-animation-delay: -1.1s;
\r
90 animation-delay: -1.1s;
\r
93 .container3 .circle1 {
\r
94 -webkit-animation-delay: -1.0s;
\r
95 animation-delay: -1.0s;
\r
98 .container1 .circle2 {
\r
99 -webkit-animation-delay: -0.9s;
\r
100 animation-delay: -0.9s;
\r
103 .container2 .circle2 {
\r
104 -webkit-animation-delay: -0.8s;
\r
105 animation-delay: -0.8s;
\r
108 .container3 .circle2 {
\r
109 -webkit-animation-delay: -0.7s;
\r
110 animation-delay: -0.7s;
\r
113 .container1 .circle3 {
\r
114 -webkit-animation-delay: -0.6s;
\r
115 animation-delay: -0.6s;
\r
118 .container2 .circle3 {
\r
119 -webkit-animation-delay: -0.5s;
\r
120 animation-delay: -0.5s;
\r
123 .container3 .circle3 {
\r
124 -webkit-animation-delay: -0.4s;
\r
125 animation-delay: -0.4s;
\r
128 .container1 .circle4 {
\r
129 -webkit-animation-delay: -0.3s;
\r
130 animation-delay: -0.3s;
\r
133 .container2 .circle4 {
\r
134 -webkit-animation-delay: -0.2s;
\r
135 animation-delay: -0.2s;
\r
138 .container3 .circle4 {
\r
139 -webkit-animation-delay: -0.1s;
\r
140 animation-delay: -0.1s;
\r
143 @-webkit-keyframes bouncedelay {
\r
144 0%, 80%, 100% { -webkit-transform: scale(0.0) }
\r
145 40% { -webkit-transform: scale(1.0) }
\r
148 @keyframes bouncedelay {
\r
150 transform: scale(0.0);
\r
151 -webkit-transform: scale(0.0);
\r
153 transform: scale(1.0);
\r
154 -webkit-transform: scale(1.0);
\r
161 position: relative;
\r
162 -webkit-animation: rotate 2.0s infinite linear;
\r
163 animation: rotate 2.0s infinite linear;
\r
169 display: inline-block;
\r
170 position: absolute;
\r
172 background-color: #fff;
\r
173 border-radius: 100%;
\r
175 -webkit-animation: bounce 2.0s infinite ease-in-out;
\r
176 animation: bounce 2.0s infinite ease-in-out;
\r
182 -webkit-animation-delay: -1.0s;
\r
183 animation-delay: -1.0s;
\r
186 @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
\r
187 @keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
\r
189 @-webkit-keyframes bounce {
\r
190 0%, 100% { -webkit-transform: scale(0.0) }
\r
191 50% { -webkit-transform: scale(1.0) }
\r
194 @keyframes bounce {
\r
196 transform: scale(0.0);
\r
197 -webkit-transform: scale(0.0);
\r
199 transform: scale(1.0);
\r
200 -webkit-transform: scale(1.0);
\r
207 background-color: #fff;
\r
208 -webkit-animation: rotateplane 1.2s infinite ease-in-out;
\r
209 animation: rotateplane 1.2s infinite ease-in-out;
\r
212 @-webkit-keyframes rotateplane {
\r
213 0% { -webkit-transform: perspective(120px) }
\r
214 50% { -webkit-transform: perspective(120px) rotateY(180deg) }
\r
215 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
\r
218 @keyframes rotateplane {
\r
220 transform: perspective(120px) rotateX(0deg) rotateY(0deg);
\r
221 -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
\r
223 transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
\r
224 -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
\r
226 transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
\r
227 -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
\r
234 position: relative;
\r
238 background-color: #fff;
\r
241 position: absolute;
\r
245 -webkit-animation: cubemove 1.8s infinite ease-in-out;
\r
246 animation: cubemove 1.8s infinite ease-in-out;
\r
250 -webkit-animation-delay: -0.9s;
\r
251 animation-delay: -0.9s;
\r
254 @-webkit-keyframes cubemove {
\r
255 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
\r
256 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
\r
257 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
\r
258 100% { -webkit-transform: rotate(-360deg) }
\r
261 @keyframes cubemove {
\r
263 transform: translateX(42px) rotate(-90deg) scale(0.5);
\r
264 -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
\r
266 transform: translateX(42px) translateY(42px) rotate(-179deg);
\r
267 -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
\r
269 transform: translateX(42px) translateY(42px) rotate(-180deg);
\r
270 -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
\r
272 transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
\r
273 -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
\r
275 transform: rotate(-360deg);
\r
276 -webkit-transform: rotate(-360deg);
\r
283 text-align: center;
\r
287 background-color: #fff;
\r
291 display: inline-block;
\r
293 -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
\r
294 animation: stretchdelay 1.2s infinite ease-in-out;
\r
298 -webkit-animation-delay: -1.1s;
\r
299 animation-delay: -1.1s;
\r
303 -webkit-animation-delay: -1.0s;
\r
304 animation-delay: -1.0s;
\r
308 -webkit-animation-delay: -0.9s;
\r
309 animation-delay: -0.9s;
\r
313 -webkit-animation-delay: -0.8s;
\r
314 animation-delay: -0.8s;
\r
317 @-webkit-keyframes stretchdelay {
\r
318 0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
\r
319 20% { -webkit-transform: scaleY(1.0) }
\r
322 @keyframes stretchdelay {
\r
324 transform: scaleY(0.4);
\r
325 -webkit-transform: scaleY(0.4);
\r
327 transform: scaleY(1.0);
\r
328 -webkit-transform: scaleY(1.0);
\r
334 text-align: center;
\r
338 background-color: #fff;
\r
342 border-radius: 50%;
\r
343 display: inline-block;
\r
345 -webkit-animation: stretchdelay 0.7s infinite ease-in-out;
\r
346 animation: stretchdelay 0.7s infinite ease-in-out;
\r
350 -webkit-animation-delay: -0.6s;
\r
351 animation-delay: -0.6s;
\r
355 -webkit-animation-delay: -0.5s;
\r
356 animation-delay: -0.5s;
\r
360 -webkit-animation-delay: -0.4s;
\r
361 animation-delay: -0.4s;
\r
365 -webkit-animation-delay: -0.3s;
\r
366 animation-delay: -0.3s;
\r
369 @-webkit-keyframes stretchdelay {
\r
370 0%, 40%, 100% { -webkit-transform: translateY(-10px) }
\r
371 20% { -webkit-transform: translateY(-20px) }
\r
374 @keyframes stretchdelay {
\r
376 transform: translateY(-10px);
\r
377 -webkit-transform: translateY(-10px);
\r
379 transform: translateY(-20px);
\r
380 -webkit-transform: translateY(-20px);
\r