Ajax Loader
HTML 
<!-- Chrome で全部動く、Webkit なら Droid くんは動く
1
<!-- Chrome で全部動く、Webkit なら Droid くんは動く
2
     左右逆なのは Droid くん側からみてるから -->
3
<div class="right light"></div>
4
<div class="left light"></div>
5
<div class="droid">
6
  <div class="head">
7
    <div class="ears">
8
      <div class="right ear"></div>
9
      <div class="left ear"></div>
10
    </div>
11
    <div class="eyes">
12
      <div class="right eye"></div>
13
      <div class="left eye"></div>
14
    </div>
15
  </div>
16
  <div class="body">
17
    <div class="right arm"></div>
18
    <div class="left arm"></div>
19
    <div class="trunk">
20
      <div class="tasuki">Sony Ericsson</div>
21
    </div>
22
  </div>
23
  <div class="foot">
24
    <div class="right leg"></div>
25
    <div class="left leg"></div>
26
  </div>
27
</div>
 
CSS 
body {
1
body {
2
  overflow: hidden;
3
}
4
 
5
div {
6
  -webkit-animation-duration: 2s;
7
  -moz-animation-duration: 2s;
8
  animation-duration: 2s;
9
 
10
  -webkit-animation-iteration-count: infinite;
11
  -moz-animation-iteration-count: infinite;
12
  -ms-animation-iteration-count: infinite;
13
  animation-iteration-count: infinite;
14
}
15
 
16
.left {
17
  float: right;
18
}
19
 
20
.right {
21
  float: left;
22
}
23
 
24
.droid {
25
  padding: 40px;
26
 
27
  -webkit-animation-name: kf_droid1, kf_droid2, kf_droid3;
28
  -moz-animation-name: kf_droid1, kf_droid2, kf_droid3;
29
  -ms-animation-name: kf_droid1, kf_droid2, kf_droid3;
30
  animation-name: kf_droid1, kf_droid2, kf_droid3;
31
}
32
 
33
.head {
34
  width: 200px;
35
  height: 90px;
36
 
37
  -webkit-border-radius: 100px 100px 0 0;
38
  -moz-border-radius: 100px 100px 0 0;
39
  border-radius: 100px 100px 0 0;
40
  margin: auto;
41
  background: #9c4;
42
}
43
 
44
.ears {
45
  width: 150px;
46
  margin: auto;
47
}
48
 
49
.ear {
50
  width: 8px;
51
  height: 60px;
52
 
53
  -webkit-border-radius: 4px;
54
  -moz-border-radius: 4px;
55
  border-radius: 4px;
56
  background: #9c4;
57
  margin-top: -20px;
58
}
59
 
60
.left.ear {
61
  -webkit-transform: rotate(30deg);
62
  -moz-transform: rotate(30deg);
63
  -o-transform: rotate(30deg);
64
  -ms-transform: rotate(30deg);
65
  transform: rotate(30deg);
66
}
67
 
68
.right.ear {
69
  -webkit-transform: rotate(-30deg);
70
  -moz-transform: rotate(-30deg);
71
  -o-transform: rotate(-30deg);
72
  -ms-transform: rotate(-30deg);
73
  transform: rotate(-30deg);
74
}
75
 
76
.eyes {
77
  width: 120px;
78
  margin: auto;
79
}
80
 
81
.eye {
82
  width: 20px;
83
  height: 20px;
84
 
85
  -webkit-border-radius: 10px;
86
  -moz-border-radius: 10px;
87
  border-radius: 10px;
88
  background: #fff;
89
  margin-top: 40px;
90
}
91
 
92
.body {
93
  width: 290px;
94
  margin: 0 auto -50px auto;
95
}
96
 
97
.arm {
98
  width: 40px;
99
  height: 120px;
100
  background: #9c4;
101
 
102
  -webkit-border-radius: 20px 20px 20px 20px;
103
  -moz-border-radius: 20px 20px 20px 20px;
104
  border-radius: 20px 20px 20px 20px;
105
 
106
  -webkit-animation-name: kf_arm1;
107
  -moz-animation-name: kf_arm1;
108
  -ms-animation-name: kf_arm1;
109
  animation-name: kf_arm1;
110
}
111
 
112
.trunk {
113
  width: 200px;
114
  height: 170px;
115
  background: #9c4;
116
 
117
  -webkit-border-radius: 0 0 20px 20px;
118
  -moz-border-radius: 0 0 20px 20px;
119
  border-radius: 0 0 20px 20px;
120
  margin: 5px auto 0 auto;
121
}
122
 
123
.tasuki {
124
  width: 200px;
125
  background: red;
126
  color: white;
127
  text-align: center;
128
 
129
  -webkit-transform-origin: 0 0;
130
  -moz-transform-origin: 0 0;
131
  -o-transform-origin: 0 0;
132
  -ms-transform-origin: 0 0;
133
  transform-origin: 0 0; /* 1/cosθ */
134
 
135
-webkit-transform: rotate(30deg) skew(30deg) scaleX(1.1547 );
136
  -moz-transform: rotate(30deg) skew(30deg) scaleX(1.1547 );
137
  -o-transform: rotate(30deg) skew(30deg) scaleX(1.1547 );
138
  -ms-transform: rotate(30deg) skew(30deg) scaleX(1.1547 );
139
  transform: rotate(30deg) skew(30deg) scaleX(1.1547 ); /* 1/cosθ */
140
/* 1/cosθ */
141
}
142
 
143
.foot {
144
  width: 120px;
145
  margin: auto;
146
 
147
  -webkit-animation-name: kf_foot1;
148
  -moz-animation-name: kf_foot1;
149
  -ms-animation-name: kf_foot1;
150
  animation-name: kf_foot1;
151
}
152
 
153
.leg {
154
  width: 40px;
155
  height: 90px;
156
  background: #9c4;
157
 
158
  -webkit-border-radius: 20px 20px 20px 20px;
159
  -moz-border-radius: 20px 20px 20px 20px;
160
  border-radius: 20px 20px 20px 20px;
161
 
162
  -webkit-transform-origin: 20px 20px;
163
  -moz-transform-origin: 20px 20px;
164
  -o-transform-origin: 20px 20px;
165
  -ms-transform-origin: 20px 20px;
166
  transform-origin: 20px 20px;
167
}
168
 
169
.right.leg {
170
  -webkit-animation-name: kf_right_leg2;
171
  -moz-animation-name: kf_right_leg2;
172
  -ms-animation-name: kf_right_leg2;
173
  animation-name: kf_right_leg2;
174
}
175
 
176
.left.leg {
177
  -webkit-animation-name: kf_left_leg2;
178
  -moz-animation-name: kf_left_leg2;
179
  -ms-animation-name: kf_left_leg2;
180
  animation-name: kf_left_leg2;
181
}
182
 
183
.light {
184
  position: absolute;
185
  z-index: 1;
186
  width: 200px;
187
  height: 400px;
188
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
189
  filter: alpha(opacity=30);
190
  opacity: 0.3;
191
}
192
 
193
.right.light {
194
  left: 0;
195
 
196
  background: -webkit-linear-gradient(20deg, transparent, transparent 50%, #0ff 50%, #0ff 100%);
197
  background: -moz-linear-gradient(20deg, transparent, transparent 50%, #0ff 50%, #0ff 100%);
198
  background: -o-linear-gradient(20deg, transparent, transparent 50%, #0ff 50%, #0ff 100%);
199
  background: -ms-linear-gradient(20deg, transparent, transparent 50%, #0ff 50%, #0ff 100%);
200
  background: linear-gradient(20deg, transparent, transparent 50%, #0ff 50%, #0ff 100%);
201
 
202
  -webkit-transform-origin: 100% 100%;
203
  -moz-transform-origin: 100% 100%;
204
  -o-transform-origin: 100% 100%;
205
  -ms-transform-origin: 100% 100%;
206
  transform-origin: 100% 100%;
207
 
208
  -webkit-animation-name: kf_right_light;
209
  -moz-animation-name: kf_right_light;
210
  -ms-animation-name: kf_right_light;
211
  animation-name: kf_right_light;
212
  -webkit-animation-duration: 1.3s;
213
  -moz-animation-duration: 1.3s;
214
  animation-duration: 1.3s;
215
}
216
 
217
.left.light {
218
  right: 0;
219
 
220
  background: -webkit-linear-gradient(-20deg, #f0f, #f0f 50%, transparent 50%, transparent 100%);
221
  background: -moz-linear-gradient(-20deg, #f0f, #f0f 50%, transparent 50%, transparent 100%);
222
  background: -o-linear-gradient(-20deg, #f0f, #f0f 50%, transparent 50%, transparent 100%);
223
  background: -ms-linear-gradient(-20deg, #f0f, #f0f 50%, transparent 50%, transparent 100%);
224
  background: linear-gradient(-20deg, #f0f, #f0f 50%, transparent 50%, transparent 100%);
225
 
226
  -webkit-transform-origin: 0 100%;
227
  -moz-transform-origin: 0 100%;
228
  -o-transform-origin: 0 100%;
229
  -ms-transform-origin: 0 100%;
230
  transform-origin: 0 100%;
231
 
232
  -webkit-animation-name: kf_left_light;
233
  -moz-animation-name: kf_left_light;
234
  -ms-animation-name: kf_left_light;
235
  animation-name: kf_left_light;
236
  -webkit-animation-duration: 1.7s;
237
  -moz-animation-duration: 1.7s;
238
  animation-duration: 1.7s;
239
}
240
 
241
@keyframes "kf_droid1" {
242
 0% {
243
    padding-top: 40px;
244
 }
245
 
246
12.5% {
247
  padding-top: 60px;
248
}
249
 
250
25.0% {
251
  padding-top: 40px;
252
}
253
 
254
37.5% {
255
  padding-top: 60px;
256
}
257
 
258
50.0% {
259
  padding-top: 40px;
260
}
261
 
262
62.5% {
263
  padding-top: 60px;
264
}
265
 
266
75.0% {
267
  padding-top: 40px;
268
}
269
 
270
87.5% {
271
  padding-top: 60px;
272
}
273
 100% {
274
    padding-top: 40px;
275
 }
276
 
277
}
278
 
279
@-moz-keyframes kf_droid1 {
280
 0% {
281
   padding-top: 40px;
282
 }
283
 
284
12.5% {
285
  padding-top: 60px;
286
}
287
 
288
25.0% {
289
  padding-top: 40px;
290
}
291
 
292
37.5% {
293
  padding-top: 60px;
294
}
295
 
296
50.0% {
297
  padding-top: 40px;
298
}
299
 
300
62.5% {
301
  padding-top: 60px;
302
}
303
 
304
75.0% {
305
  padding-top: 40px;
306
}
307
 
308
87.5% {
309
  padding-top: 60px;
310
}
311
 100% {
312
   padding-top: 40px;
313
 }
314
 
315
}
316
 
317
@-webkit-keyframes "kf_droid1" {
318
 0% {
319
   padding-top: 40px;
320
 }
321
 
322
12.5% {
323
  padding-top: 60px;
324
}
325
 
326
25.0% {
327
  padding-top: 40px;
328
}
329
 
330
37.5% {
331
  padding-top: 60px;
332
}
333
 
334
50.0% {
335
  padding-top: 40px;
336
}
337
 
338
62.5% {
339
  padding-top: 60px;
340
}
341
 
342
75.0% {
343
  padding-top: 40px;
344
}
345
 
346
87.5% {
347
  padding-top: 60px;
348
}
349
 100% {
350
   padding-top: 40px;
351
 }
352
 
353
}
354
 
355
@-ms-keyframes "kf_droid1" {
356
 0% {
357
   padding-top: 40px;
358
 }
359
 
360
12.5% {
361
  padding-top: 60px;
362
}
363
 
364
25.0% {
365
  padding-top: 40px;
366
}
367
 
368
37.5% {
369
  padding-top: 60px;
370
}
371
 
372
50.0% {
373
  padding-top: 40px;
374
}
375
 
376
62.5% {
377
  padding-top: 60px;
378
}
379
 
380
75.0% {
381
  padding-top: 40px;
382
}
383
 
384
87.5% {
385
  padding-top: 60px;
386
}
387
 100% {
388
   padding-top: 40px;
389
 }
390
 
391
}
392
 
393
@keyframes "kf_foot1" {
394
 0% {
395
    padding-top: 20px;
396
 }
397
 
398
12.5% {
399
  padding-top: 0;
400
}
401
 
402
25.0% {
403
  padding-top: 20px;
404
}
405
 
406
37.5% {
407
  padding-top: 0;
408
}
409
 
410
50.0% {
411
  padding-top: 20px;
412
}
413
 
414
62.5% {
415
  padding-top: 0;
416
}
417
 
418
75.0% {
419
  padding-top: 20px;
420
}
421
 
422
87.5% {
423
  padding-top: 0;
424
}
425
 100% {
426
    padding-top: 20px;
427
 }
428
 
429
}
430
 
431
@-moz-keyframes kf_foot1 {
432
 0% {
433
   padding-top: 20px;
434
 }
435
 
436
12.5% {
437
  padding-top: 0;
438
}
439
 
440
25.0% {
441
  padding-top: 20px;
442
}
443
 
444
37.5% {
445
  padding-top: 0;
446
}
447
 
448
50.0% {
449
  padding-top: 20px;
450
}
451
 
452
62.5% {
453
  padding-top: 0;
454
}
455
 
456
75.0% {
457
  padding-top: 20px;
458
}
459
 
460
87.5% {
461
  padding-top: 0;
462
}
463
 100% {
464
   padding-top: 20px;
465
 }
466
 
467
}
468
 
469
@-webkit-keyframes "kf_foot1" {
470
 0% {
471
   padding-top: 20px;
472
 }
473
 
474
12.5% {
475
  padding-top: 0;
476
}
477
 
478
25.0% {
479
  padding-top: 20px;
480
}
481
 
482
37.5% {
483
  padding-top: 0;
484
}
485
 
486
50.0% {
487
  padding-top: 20px;
488
}
489
 
490
62.5% {
491
  padding-top: 0;
492
}
493
 
494
75.0% {
495
  padding-top: 20px;
496
}
497
 
498
87.5% {
499
  padding-top: 0;
500
}
501
 100% {
502
   padding-top: 20px;
503
 }
504
 
505
}
506
 
507
@-ms-keyframes "kf_foot1" {
508
 0% {
509
   padding-top: 20px;
510
 }
511
 
512
12.5% {
513
  padding-top: 0;
514
}
515
 
516
25.0% {
517
  padding-top: 20px;
518
}
519
 
520
37.5% {
521
  padding-top: 0;
522
}
523
 
524
50.0% {
525
  padding-top: 20px;
526
}
527
 
528
62.5% {
529
  padding-top: 0;
530
}
531
 
532
75.0% {
533
  padding-top: 20px;
534
}
535
 
536
87.5% {
537
  padding-top: 0;
538
}
539
 100% {
540
   padding-top: 20px;
541
 }
542
 
543
}
544
 
545
@keyframes "kf_droid2" {
546
 0% {
547
    padding-left: 0;
548
 }
549
 25% {
550
    padding-left: 0;
551
 }
552
 50% {
553
    padding-left: 80px;
554
 }
555
 75% {
556
    padding-left: 80px;
557
 }
558
 100% {
559
    padding-left: 0;
560
 }
561
 
562
}
563
 
564
@-moz-keyframes kf_droid2 {
565
 0% {
566
   padding-left: 0;
567
 }
568
 25% {
569
   padding-left: 0;
570
 }
571
 50% {
572
   padding-left: 80px;
573
 }
574
 75% {
575
   padding-left: 80px;
576
 }
577
 100% {
578
   padding-left: 0;
579
 }
580
 
581
}
582
 
583
@-webkit-keyframes "kf_droid2" {
584
 0% {
585
   padding-left: 0;
586
 }
587
 25% {
588
   padding-left: 0;
589
 }
590
 50% {
591
   padding-left: 80px;
592
 }
593
 75% {
594
   padding-left: 80px;
595
 }
596
 100% {
597
   padding-left: 0;
598
 }
599
 
600
}
601
 
602
@-ms-keyframes "kf_droid2" {
603
 0% {
604
   padding-left: 0;
605
 }
606
 25% {
607
   padding-left: 0;
608
 }
609
 50% {
610
   padding-left: 80px;
611
 }
612
 75% {
613
   padding-left: 80px;
614
 }
615
 100% {
616
   padding-left: 0;
617
 }
618
 
619
}
620
 
621
@keyframes "kf_droid3" {
622
 0% {
623
    -webkit-transform: rotate(0deg);
624
    -moz-transform: rotate(0deg);
625
    -o-transform: rotate(0deg);
626
    -ms-transform: rotate(0deg);
627
    transform: rotate(0deg);
628
 }
629
 10% {
630
    -webkit-transform: rotate(0deg);
631
    -moz-transform: rotate(0deg);
632
    -o-transform: rotate(0deg);
633
    -ms-transform: rotate(0deg);
634
    transform: rotate(0deg);
635
 }
636
 30% {
637
    -webkit-transform: rotate(-15deg);
638
    -moz-transform: rotate(-15deg);
639
    -o-transform: rotate(-15deg);
640
    -ms-transform: rotate(-15deg);
641
    transform: rotate(-15deg);
642
 }
643
 50% {
644
    -webkit-transform: rotate(0deg);
645
    -moz-transform: rotate(0deg);
646
    -o-transform: rotate(0deg);
647
    -ms-transform: rotate(0deg);
648
    transform: rotate(0deg);
649
 }
650
 60% {
651
    -webkit-transform: rotate(0deg);
652
    -moz-transform: rotate(0deg);
653
    -o-transform: rotate(0deg);
654
    -ms-transform: rotate(0deg);
655
    transform: rotate(0deg);
656
 }
657
 80% {
658
    -webkit-transform: rotate(15deg);
659
    -moz-transform: rotate(15deg);
660
    -o-transform: rotate(15deg);
661
    -ms-transform: rotate(15deg);
662
    transform: rotate(15deg);
663
 }
664
 100% {
665
    -webkit-transform: rotate(0deg);
666
    -moz-transform: rotate(0deg);
667
    -o-transform: rotate(0deg);
668
    -ms-transform: rotate(0deg);
669
    transform: rotate(0deg);
670
 }
671
 
672
}
673
 
674
@-moz-keyframes kf_droid3 {
675
 0% {
676
   -moz-transform: rotate(0deg);
677
   transform: rotate(0deg);
678
 }
679
 10% {
680
   -moz-transform: rotate(0deg);
681
   transform: rotate(0deg);
682
 }
683
 30% {
684
   -moz-transform: rotate(-15deg);
685
   transform: rotate(-15deg);
686
 }
687
 50% {
688
   -moz-transform: rotate(0deg);
689
   transform: rotate(0deg);
690
 }
691
 60% {
692
   -moz-transform: rotate(0deg);
693
   transform: rotate(0deg);
694
 }
695
 80% {
696
   -moz-transform: rotate(15deg);
697
   transform: rotate(15deg);
698
 }
699
 100% {
700
   -moz-transform: rotate(0deg);
701
   transform: rotate(0deg);
702
 }
703
 
704
}
705
 
706
@-webkit-keyframes "kf_droid3" {
707
 0% {
708
   -webkit-transform: rotate(0deg);
709
   transform: rotate(0deg);
710
 }
711
 10% {
712
   -webkit-transform: rotate(0deg);
713
   transform: rotate(0deg);
714
 }
715
 30% {
716
   -webkit-transform: rotate(-15deg);
717
   transform: rotate(-15deg);
718
 }
719
 50% {
720
   -webkit-transform: rotate(0deg);
721
   transform: rotate(0deg);
722
 }
723
 60% {
724
   -webkit-transform: rotate(0deg);
725
   transform: rotate(0deg);
726
 }
727
 80% {
728
   -webkit-transform: rotate(15deg);
729
   transform: rotate(15deg);
730
 }
731
 100% {
732
   -webkit-transform: rotate(0deg);
733
   transform: rotate(0deg);
734
 }
735
 
736
}
737
 
738
@-ms-keyframes "kf_droid3" {
739
 0% {
740
   -ms-transform: rotate(0deg);
741
   transform: rotate(0deg);
742
 }
743
 10% {
744
   -ms-transform: rotate(0deg);
745
   transform: rotate(0deg);
746
 }
747
 30% {
748
   -ms-transform: rotate(-15deg);
749
   transform: rotate(-15deg);
750
 }
751
 50% {
752
   -ms-transform: rotate(0deg);
753
   transform: rotate(0deg);
754
 }
755
 60% {
756
   -ms-transform: rotate(0deg);
757
   transform: rotate(0deg);
758
 }
759
 80% {
760
   -ms-transform: rotate(15deg);
761
   transform: rotate(15deg);
762
 }
763
 100% {
764
   -ms-transform: rotate(0deg);
765
   transform: rotate(0deg);
766
 }
767
 
768
}
769
 
770
@keyframes "kf_arm1" {
771
 0% {
772
    height: 110px;
773
 }
774
 
775
12.5% {
776
  height: 120px;
777
}
778
 
779
25.0% {
780
  height: 100px;
781
}
782
 
783
37.5% {
784
  height: 120px;
785
}
786
 
787
50.0% {
788
  height: 110px;
789
}
790
 
791
62.5% {
792
  height: 120px;
793
}
794
 
795
75.0% {
796
  height: 100px;
797
}
798
 
799
87.5% {
800
  height: 120px;
801
}
802
 100% {
803
    height: 110px;
804
 }
805
 
806
}
807
 
808
@-moz-keyframes kf_arm1 {
809
 0% {
810
   height: 110px;
811
 }
812
 
813
12.5% {
814
  height: 120px;
815
}
816
 
817
25.0% {
818
  height: 100px;
819
}
820
 
821
37.5% {
822
  height: 120px;
823
}
824
 
825
50.0% {
826
  height: 110px;
827
}
828
 
829
62.5% {
830
  height: 120px;
831
}
832
 
833
75.0% {
834
  height: 100px;
835
}
836
 
837
87.5% {
838
  height: 120px;
839
}
840
 100% {
841
   height: 110px;
842
 }
843
 
844
}
845
 
846
@-webkit-keyframes "kf_arm1" {
847
 0% {
848
   height: 110px;
849
 }
850
 
851
12.5% {
852
  height: 120px;
853
}
854
 
855
25.0% {
856
  height: 100px;
857
}
858
 
859
37.5% {
860
  height: 120px;
861
}
862
 
863
50.0% {
864
  height: 110px;
865
}
866
 
867
62.5% {
868
  height: 120px;
869
}
870
 
871
75.0% {
872
  height: 100px;
873
}
874
 
875
87.5% {
876
  height: 120px;
877
}
878
 100% {
879
   height: 110px;
880
 }
881
 
882
}
883
 
884
@-ms-keyframes "kf_arm1" {
885
 0% {
886
   height: 110px;
887
 }
888
 
889
12.5% {
890
  height: 120px;
891
}
892
 
893
25.0% {
894
  height: 100px;
895
}
896
 
897
37.5% {
898
  height: 120px;
899
}
900
 
901
50.0% {
902
  height: 110px;
903
}
904
 
905
62.5% {
906
  height: 120px;
907
}
908
 
909
75.0% {
910
  height: 100px;
911
}
912
 
913
87.5% {
914
  height: 120px;
915
}
916
 100% {
917
   height: 110px;
918
 }
919
 
920
}
921
 
922
@keyframes "kf_right_leg2" {
923
 0% {
924
    -webkit-transform: rotate(0deg);
925
    -moz-transform: rotate(0deg);
926
    -o-transform: rotate(0deg);
927
    -ms-transform: rotate(0deg);
928
    transform: rotate(0deg);
929
 }
930
 10% {
931
    -webkit-transform: rotate(0deg);
932
    -moz-transform: rotate(0deg);
933
    -o-transform: rotate(0deg);
934
    -ms-transform: rotate(0deg);
935
    transform: rotate(0deg);
936
 }
937
 30% {
938
    -webkit-transform: rotate(20deg);
939
    -moz-transform: rotate(20deg);
940
    -o-transform: rotate(20deg);
941
    -ms-transform: rotate(20deg);
942
    transform: rotate(20deg);
943
 }
944
 50% {
945
    -webkit-transform: rotate(0deg);
946
    -moz-transform: rotate(0deg);
947
    -o-transform: rotate(0deg);
948
    -ms-transform: rotate(0deg);
949
    transform: rotate(0deg);
950
 }
951
 60% {
952
    -webkit-transform: rotate(0deg);
953
    -moz-transform: rotate(0deg);
954
    -o-transform: rotate(0deg);
955
    -ms-transform: rotate(0deg);
956
    transform: rotate(0deg);
957
 }
958
 70% {
959
    -webkit-transform: rotate(20deg);
960
    -moz-transform: rotate(20deg);
961
    -o-transform: rotate(20deg);
962
    -ms-transform: rotate(20deg);
963
    transform: rotate(20deg);
964
 }
965
 100% {
966
    -webkit-transform: rotate(0deg);
967
    -moz-transform: rotate(0deg);
968
    -o-transform: rotate(0deg);
969
    -ms-transform: rotate(0deg);
970
    transform: rotate(0deg);
971
 }
972
 
973
}
974
 
975
@-moz-keyframes kf_right_leg2 {
976
 0% {
977
   -moz-transform: rotate(0deg);
978
   transform: rotate(0deg);
979
 }
980
 10% {
981
   -moz-transform: rotate(0deg);
982
   transform: rotate(0deg);
983
 }
984
 30% {
985
   -moz-transform: rotate(20deg);
986
   transform: rotate(20deg);
987
 }
988
 50% {
989
   -moz-transform: rotate(0deg);
990
   transform: rotate(0deg);
991
 }
992
 60% {
993
   -moz-transform: rotate(0deg);
994
   transform: rotate(0deg);
995
 }
996
 70% {
997
   -moz-transform: rotate(20deg);
998
   transform: rotate(20deg);
999
 }
1000
 100% {
1001
   -moz-transform: rotate(0deg);
1002
   transform: rotate(0deg);
1003
 }
1004
 
1005
}
1006
 
1007
@-webkit-keyframes "kf_right_leg2" {
1008
 0% {
1009
   -webkit-transform: rotate(0deg);
1010
   transform: rotate(0deg);
1011
 }
1012
 10% {
1013
   -webkit-transform: rotate(0deg);
1014
   transform: rotate(0deg);
1015
 }
1016
 30% {
1017
   -webkit-transform: rotate(20deg);
1018
   transform: rotate(20deg);
1019
 }
1020
 50% {
1021
   -webkit-transform: rotate(0deg);
1022
   transform: rotate(0deg);
1023
 }
1024
 60% {
1025
   -webkit-transform: rotate(0deg);
1026
   transform: rotate(0deg);
1027
 }
1028
 70% {
1029
   -webkit-transform: rotate(20deg);
1030
   transform: rotate(20deg);
1031
 }
1032
 100% {
1033
   -webkit-transform: rotate(0deg);
1034
   transform: rotate(0deg);
1035
 }
1036
 
1037
}
1038
 
1039
@-ms-keyframes "kf_right_leg2" {
1040
 0% {
1041
   -ms-transform: rotate(0deg);
1042
   transform: rotate(0deg);
1043
 }
1044
 10% {
1045
   -ms-transform: rotate(0deg);
1046
   transform: rotate(0deg);
1047
 }
1048
 30% {
1049
   -ms-transform: rotate(20deg);
1050
   transform: rotate(20deg);
1051
 }
1052
 50% {
1053
   -ms-transform: rotate(0deg);
1054
   transform: rotate(0deg);
1055
 }
1056
 60% {
1057
   -ms-transform: rotate(0deg);
1058
   transform: rotate(0deg);
1059
 }
1060
 70% {
1061
   -ms-transform: rotate(20deg);
1062
   transform: rotate(20deg);
1063
 }
1064
 100% {
1065
   -ms-transform: rotate(0deg);
1066
   transform: rotate(0deg);
1067
 }
1068
 
1069
}
1070
 
1071
@keyframes "kf_left_leg2" {
1072
 0% {
1073
    -webkit-transform: rotate(0deg);
1074
    -moz-transform: rotate(0deg);
1075
    -o-transform: rotate(0deg);
1076
    -ms-transform: rotate(0deg);
1077
    transform: rotate(0deg);
1078
 }
1079
 10% {
1080
    -webkit-transform: rotate(0deg);
1081
    -moz-transform: rotate(0deg);
1082
    -o-transform: rotate(0deg);
1083
    -ms-transform: rotate(0deg);
1084
    transform: rotate(0deg);
1085
 }
1086
 20% {
1087
    -webkit-transform: rotate(-20deg);
1088
    -moz-transform: rotate(-20deg);
1089
    -o-transform: rotate(-20deg);
1090
    -ms-transform: rotate(-20deg);
1091
    transform: rotate(-20deg);
1092
 }
1093
 50% {
1094
    -webkit-transform: rotate(0deg);
1095
    -moz-transform: rotate(0deg);
1096
    -o-transform: rotate(0deg);
1097
    -ms-transform: rotate(0deg);
1098
    transform: rotate(0deg);
1099
 }
1100
 60% {
1101
    -webkit-transform: rotate(0deg);
1102
    -moz-transform: rotate(0deg);
1103
    -o-transform: rotate(0deg);
1104
    -ms-transform: rotate(0deg);
1105
    transform: rotate(0deg);
1106
 }
1107
 80% {
1108
    -webkit-transform: rotate(-20deg);
1109
    -moz-transform: rotate(-20deg);
1110
    -o-transform: rotate(-20deg);
1111
    -ms-transform: rotate(-20deg);
1112
    transform: rotate(-20deg);
1113
 }
1114
 100% {
1115
    -webkit-transform: rotate(0deg);
1116
    -moz-transform: rotate(0deg);
1117
    -o-transform: rotate(0deg);
1118
    -ms-transform: rotate(0deg);
1119
    transform: rotate(0deg);
1120
 }
1121
 
1122
}
1123
 
1124
@-moz-keyframes kf_left_leg2 {
1125
 0% {
1126
   -moz-transform: rotate(0deg);
1127
   transform: rotate(0deg);
1128
 }
1129
 10% {
1130
   -moz-transform: rotate(0deg);
1131
   transform: rotate(0deg);
1132
 }
1133
 20% {
1134
   -moz-transform: rotate(-20deg);
1135
   transform: rotate(-20deg);
1136
 }
1137
 50% {
1138
   -moz-transform: rotate(0deg);
1139
   transform: rotate(0deg);
1140
 }
1141
 60% {
1142
   -moz-transform: rotate(0deg);
1143
   transform: rotate(0deg);
1144
 }
1145
 80% {
1146
   -moz-transform: rotate(-20deg);
1147
   transform: rotate(-20deg);
1148
 }
1149
 100% {
1150
   -moz-transform: rotate(0deg);
1151
   transform: rotate(0deg);
1152
 }
1153
 
1154
}
1155
 
1156
@-webkit-keyframes "kf_left_leg2" {
1157
 0% {
1158
   -webkit-transform: rotate(0deg);
1159
   transform: rotate(0deg);
1160
 }
1161
 10% {
1162
   -webkit-transform: rotate(0deg);
1163
   transform: rotate(0deg);
1164
 }
1165
 20% {
1166
   -webkit-transform: rotate(-20deg);
1167
   transform: rotate(-20deg);
1168
 }
1169
 50% {
1170
   -webkit-transform: rotate(0deg);
1171
   transform: rotate(0deg);
1172
 }
1173
 60% {
1174
   -webkit-transform: rotate(0deg);
1175
   transform: rotate(0deg);
1176
 }
1177
 80% {
1178
   -webkit-transform: rotate(-20deg);
1179
   transform: rotate(-20deg);
1180
 }
1181
 100% {
1182
   -webkit-transform: rotate(0deg);
1183
   transform: rotate(0deg);
1184
 }
1185
 
1186
}
1187
 
1188
@-ms-keyframes "kf_left_leg2" {
1189
 0% {
1190
   -ms-transform: rotate(0deg);
1191
   transform: rotate(0deg);
1192
 }
1193
 10% {
1194
   -ms-transform: rotate(0deg);
1195
   transform: rotate(0deg);
1196
 }
1197
 20% {
1198
   -ms-transform: rotate(-20deg);
1199
   transform: rotate(-20deg);
1200
 }
1201
 50% {
1202
   -ms-transform: rotate(0deg);
1203
   transform: rotate(0deg);
1204
 }
1205
 60% {
1206
   -ms-transform: rotate(0deg);
1207
   transform: rotate(0deg);
1208
 }
1209
 80% {
1210
   -ms-transform: rotate(-20deg);
1211
   transform: rotate(-20deg);
1212
 }
1213
 100% {
1214
   -ms-transform: rotate(0deg);
1215
   transform: rotate(0deg);
1216
 }
1217
 
1218
}
1219
 
1220
@keyframes "kf_right_light" {
1221
 0% {
1222
    -webkit-transform: skew(-10deg);
1223
    -moz-transform: skew(-10deg);
1224
    -o-transform: skew(-10deg);
1225
    -ms-transform: skew(-10deg);
1226
    transform: skew(-10deg);
1227
 }
1228
 50% {
1229
    -webkit-transform: skew(-50deg);
1230
    -moz-transform: skew(-50deg);
1231
    -o-transform: skew(-50deg);
1232
    -ms-transform: skew(-50deg);
1233
    transform: skew(-50deg);
1234
 }
1235
 100% {
1236
    -webkit-transform: skew(-10deg);
1237
    -moz-transform: skew(-10deg);
1238
    -o-transform: skew(-10deg);
1239
    -ms-transform: skew(-10deg);
1240
    transform: skew(-10deg);
1241
 }
1242
 
1243
}
1244
 
1245
@-moz-keyframes kf_right_light {
1246
 0% {
1247
   -moz-transform: skew(-10deg);
1248
   transform: skew(-10deg);
1249
 }
1250
 50% {
1251
   -moz-transform: skew(-50deg);
1252
   transform: skew(-50deg);
1253
 }
1254
 100% {
1255
   -moz-transform: skew(-10deg);
1256
   transform: skew(-10deg);
1257
 }
1258
 
1259
}
1260
 
1261
@-webkit-keyframes "kf_right_light" {
1262
 0% {
1263
   -webkit-transform: skew(-10deg);
1264
   transform: skew(-10deg);
1265
 }
1266
 50% {
1267
   -webkit-transform: skew(-50deg);
1268
   transform: skew(-50deg);
1269
 }
1270
 100% {
1271
   -webkit-transform: skew(-10deg);
1272
   transform: skew(-10deg);
1273
 }
1274
 
1275
}
1276
 
1277
@-ms-keyframes "kf_right_light" {
1278
 0% {
1279
   -ms-transform: skew(-10deg);
1280
   transform: skew(-10deg);
1281
 }
1282
 50% {
1283
   -ms-transform: skew(-50deg);
1284
   transform: skew(-50deg);
1285
 }
1286
 100% {
1287
   -ms-transform: skew(-10deg);
1288
   transform: skew(-10deg);
1289
 }
1290
 
1291
}
1292
 
1293
@keyframes "kf_left_light" {
1294
 0% {
1295
    -webkit-transform: skew(10deg);
1296
    -moz-transform: skew(10deg);
1297
    -o-transform: skew(10deg);
1298
    -ms-transform: skew(10deg);
1299
    transform: skew(10deg);
1300
 }
1301
 50% {
1302
    -webkit-transform: skew(50deg);
1303
    -moz-transform: skew(50deg);
1304
    -o-transform: skew(50deg);
1305
    -ms-transform: skew(50deg);
1306
    transform: skew(50deg);
1307
 }
1308
 100% {
1309
    -webkit-transform: skew(10deg);
1310
    -moz-transform: skew(10deg);
1311
    -o-transform: skew(10deg);
1312
    -ms-transform: skew(10deg);
1313
    transform: skew(10deg);
1314
 }
1315
 
1316
}
1317
 
1318
@-moz-keyframes kf_left_light {
1319
 0% {
1320
   -moz-transform: skew(10deg);
1321
   transform: skew(10deg);
1322
 }
1323
 50% {
1324
   -moz-transform: skew(50deg);
1325
   transform: skew(50deg);
1326
 }
1327
 100% {
1328
   -moz-transform: skew(10deg);
1329
   transform: skew(10deg);
1330
 }
1331
 
1332
}
1333
 
1334
@-webkit-keyframes "kf_left_light" {
1335
 0% {
1336
   -webkit-transform: skew(10deg);
1337
   transform: skew(10deg);
1338
 }
1339
 50% {
1340
   -webkit-transform: skew(50deg);
1341
   transform: skew(50deg);
1342
 }
1343
 100% {
1344
   -webkit-transform: skew(10deg);
1345
   transform: skew(10deg);
1346
 }
1347
 
1348
}
1349
 
1350
@-ms-keyframes "kf_left_light" {
1351
 0% {
1352
   -ms-transform: skew(10deg);
1353
   transform: skew(10deg);
1354
 }
1355
 50% {
1356
   -ms-transform: skew(50deg);
1357
   transform: skew(50deg);
1358
 }
1359
 100% {
1360
   -ms-transform: skew(10deg);
1361
   transform: skew(10deg);
1362
 }
1363
 
1364
}
1365
 
 

Android on Crack

CSSDeck G+