Ajax Loader
HTML 
<!-- Matías Calvo - Full Homer CSS3  !-->
1
<!-- Matías Calvo - Full Homer CSS3  !-->
2
 
3
<section class="content">
4
 
5
  <ul>
6
    <li class="hair"></li>
7
    <li class="hair"></li>
8
  </ul>
9
 
10
  <div class="head">
11
    <div class="left-hair"></div>
12
    <div class="eyebrow"></div>
13
    <div class="eye left"></div>
14
    <div class="eye right"></div>
15
    <div class="nose"></div>
16
    <div class="mouth"></div>
17
    <div class="ear"></div>
18
  </div>
19
 
20
  <div class="body">
21
    <div class="neck"></div>
22
    <div class="neck2"></div>
23
  
24
    <div class="shirt">
25
      <div class="shirt-1"></div>
26
      <div class="shirt-2"></div>
27
    </div>
28
  
29
    <div class="shoulder left"></div>
30
    <div class="shoulder right"></div>
31
32
    <div class="arm left">
33
      <ul class="left-hand">
34
        <li class="finger left"></li>
35
        <li class="finger left"></li>
36
        <li class="finger left"></li>
37
      </ul>
38
    </div>
39
 
40
    <div class="arm right">
41
      <ul class="right-hand">
42
        <li class="finger right"></li>
43
        <li class="finger right"></li>
44
        <li class="finger right"></li>
45
      </ul>
46
    </div>
47
 
48
  </div>
49
50
  <div class="waist"></div>
51
  <div class="leg left"></div>
52
  <div class="leg right"></div>
53
  <div class="shoe left"></div>
54
  <div class="shoe right"></div>
55
 
56
</section>
 
CSS 
/* Matías Calvo - Full Homer CSS3  */
1
/* Matías Calvo - Full Homer CSS3  */
2
 
3
ol,ul, li {
4
  list-style: none;
5
}
6
 
7
.content {
8
  margin: 5% 0 0 40%;
9
}
10
 
11
.hair {
12
  width: 55px;
13
  height: 28px;
14
  border-top: 3px solid black;
15
  border-left: 2px solid black;
16
  border-right: 2px solid black;
17
  -webkit-border-top-left-radius: 50% 100%;
18
  -moz-border-radius-topleft: 50% 100%;
19
  border-top-left-radius: 50% 100%;
20
  -webkit-border-top-right-radius: 50% 100%;
21
  -moz-border-radius-topright: 50% 100%;
22
  border-top-right-radius: 50% 100%
23
  -webkit-transform: rotate(-20deg);
24
  -moz-transform: rotate(-20deg);
25
  transform: rotate(-20deg);
26
  display: inline-block;
27
  position: relative;
28
}
29
 
30
.hair:first-child {
31
  top: 45px;
32
  left: -40px;
33
  z-index: 0;
34
}
35
 
36
.hair:nth-child(2) {
37
  top: 39px;
38
  left: -85px;
39
  z-index: 1;
40
}
41
 
42
.head {
43
  width: 120px;
44
  height: 165px;
45
  background-color: #FCDB00;
46
  -webkit-border-top-left-radius: 70% 50%;
47
  -moz-border-radius-topleft: 70% 50%;
48
  border-top-left-radius: 70% 50%;
49
  -webkit-border-top-right-radius: 70% 50%;
50
  -moz-border-radius-topright: 70% 50%;
51
  border-top-right-radius: 70% 50%;
52
  -webkit-border-bottom-left-radius: 10% 80%;
53
  -moz-border-radius-bottomleft: 10% 80%;
54
  border-bottom-left-radius: 10% 80%;
55
  border-top: 2px solid black;
56
  border-left: 2px solid black;
57
  border-right: 2px solid black;
58
  -webkit-transform: rotate(-10deg);
59
  -moz-transform: rotate(-10deg);
60
  transform: rotate(-10deg);
61
  position: relative;
62
  z-index: 3;
63
}
64
 
65
.left-hair {
66
  width: 10px;
67
  height: 25px;
68
  border-top: 4px solid black;
69
  border-left: 3px solid black;
70
  position: relative;
71
  top: 110px;
72
  left: -10px;
73
  -webkit-transform: skewY(59deg);
74
}
75
 
76
.left-hair:before {
77
  width: 15px;
78
  height: 40px;
79
  border-top: 4px solid black;
80
  border-left: 2px solid black;
81
  -webkit-transform: rotate(10deg);
82
  -moz-transform: rotate(10deg);
83
  transform: rotate(10deg);
84
  content: '';
85
  position: absolute;
86
  left: 12px;
87
  top: -44px;
88
}
89
 
90
.eyebrow {
91
  width: 15px;
92
  height: 20px;
93
  background-color: #FCDB00;
94
  -webkit-transform: rotate(7deg);
95
  -moz-transform: rotate(7deg);
96
  transform: rotate(7deg);
97
  -webkit-border-top-right-radius: 90% 80%;
98
  -moz-border-radius-topright: 90% 80%;
99
  border-top-right-radius: 90% 80%;
100
  border-top: 2px solid black;
101
  border-right: 2px solid black;
102
  position: relative;
103
  left: 118px;
104
  top: 45px;
105
}
106
 
107
.eye {
108
  width: 60px;
109
  height: 60px;
110
  position: relative;
111
  background-color: white;
112
  border: 2px solid black;
113
  border-radius: 60%;
114
}
115
 
116
.eye:after {
117
  background-color: #000000;
118
  -webkit-border-radius: 100%;
119
  -moz-border-radius: 100%;
120
  border-radius: 100%;
121
  content: '';
122
  display: block;
123
  position: relative;
124
}
125
 
126
.eye.left {
127
  top: 30px;
128
  left: 45px;
129
  z-index: 4;
130
  width: 60px;
131
  height: 60px;
132
}
133
 
134
.eye.right {
135
  top: -30px;
136
  left: 90px;
137
  width: 53px;
138
  height: 53px
139
}
140
 
141
.eye.left:after,
142
.eye.right:after
143
{
144
  width: 8px;
145
  height: 8px;
146
  top: 25px;
147
  left: 30px;
148
}
149
 
150
.eye.left:after {
151
  -webkit-animation: move 2s;
152
  -webkit-animation-timing-function:linear;
153
  -webkit-animation-iteration-count:infinite;
154
}
155
 
156
.nose {
157
  width: 58px;
158
  height: 24px;
159
  -webkit-transform: rotate(10deg);
160
  -moz-transform: rotate(10deg);
161
  transform: rotate(10deg);
162
  -webkit-border-top-right-radius: 30% 60%;
163
  -moz-border-radius-topright: 30% 60%;
164
  border-top-right-radius: 30% 60%;
165
  -webkit-border-bottom-right-radius: 30% 60%;
166
  -moz-border-radius-bottomright: 30% 60%;
167
  border-bottom-right-radius: 30% 60%;
168
  background-color: #FCDB00;
169
  border-top: 2px solid black;
170
  border-right: 2px solid black;
171
  /*border-bottom: 2px solid black;*/
172
  position: relative;
173
  left: 70px;
174
  top: -40px
175
}
176
 
177
.mouth {
178
  width: 80px;
179
  height: 80px;
180
  -webkit-transform: rotate(10deg);
181
  -moz-transform: rotate(10deg);
182
  transform: rotate(10deg);
183
  background-color: #D1B270;
184
  border: 2px solid black;
185
  -webkit-border-top-left-radius: 60% 60%;
186
  -moz-border-radius-topleft: 60% 60%;
187
  border-top-left-radius: 60% 60%;
188
  -webkit-border-bottom-right-radius: 60% 40%;
189
  -moz-border-radius-bottomright: 60% 60%;
190
  border-bottom-right-radius: 60% 40%;
191
  -webkit-border-bottom-left-radius: 60% 60%;
192
  -moz-border-radius-bottomleft: 60% 60%;
193
  border-bottom-left-radius: 60% 60%;
194
  position: relative;
195
  top: -48px;
196
  left: 16px;
197
}
198
 
199
.mouth:after {
200
  width: 12px;
201
  height: 12px;
202
  content: '';
203
  display: block;
204
  -webkit-border-bottom-right-radius: 90% 80%;
205
  -moz-border-radius-bottomright: 90% 80%;
206
  border-bottom-right-radius: 90% 80%;
207
  -webkit-border-top-right-radius: 20%;
208
  -moz-border-radius-topright: 20%;
209
  border-top-right-radius: 20%;
210
  background-color: #D1B270;
211
  border-right: 2px solid black;
212
  border-bottom: 2px solid black;
213
  border-top: 2px solid black;
214
  position: relative;
215
  top: -4px;
216
  left: 76px
217
}
218
 
219
.mouth:before {
220
  width: 80px;
221
  height: 50px;
222
  content: '';
223
  display: block;
224
  -webkit-border-top-right-radius: 60% 90%;
225
  -moz-border-radius-topright-: 60% 90%;
226
  border-top-right-radius: 60% 90%;
227
  -webkit-border-bottom-right-radius: 60% 50%;
228
  -moz-border-radius-bottomright-: 60% 50%;
229
  border-bottom-right-radius: 60% 50%;
230
  -webkit-border-bottom-left-radius: 40% 20%;
231
  -moz-border-radius-bottomleft-: 40% 20%;
232
  border-bottom-left-radius: 40% 20%;
233
  background-color: #D1B270;
234
  border-top: 2px solid black;
235
  border-bottom: 2px solid black;
236
  border-right: 2px solid black;
237
  position: relative;
238
  top: -2px;
239
  left: 40px
240
}
241
 
242
.ear {
243
  width: 30px;
244
  height: 30px;
245
  -webkit-transform: rotate(-50deg);
246
  transform: rotate(-50deg);
247
  background-color: #FCDB00;
248
  border-top: 2px solid black;
249
  border-left: 2px solid black;
250
  border-radius: 50%;
251
  position: relative;
252
  top: -154px;
253
  left: -14px;
254
}
255
 
256
.ear:after {
257
  width: 10px;
258
  height: 12px;
259
  content: '';
260
  background-color: #FCDB00;
261
  -webkit-border-top-right-radius: 80% 80%;
262
  -moz-border-radius-topright: 80% 80%;
263
  border-top-right-radius: 80% 80%;
264
  border-right: 2px solid black;
265
  position: absolute;
266
  left: 7px;
267
  top: 8px;
268
}
269
 
270
.ear:before {
271
  width: 10px;
272
  height: 12px;
273
  content: '';
274
  background-color: #FCDB00;
275
  -webkit-border-top-left-radius: 80% 80%;
276
  -moz-border-radius-topleft: 80% 80%;
277
  border-top-left-radius: 80% 80%;
278
  border-top: 2px solid black;
279
  position: absolute;
280
  left: 7px;
281
  top: 11px;
282
  z-index: 1;
283
}
284
 
285
.neck {
286
  width: 90px;
287
  height: 80px;
288
  background-color: #FCDB00;
289
  border: 2px solid black;
290
  position: relative;
291
  left: 18px;
292
  z-index: -1;
293
}
294
 
295
.neck2 {
296
  width: 50px;
297
  height: 28px;
298
  content: '';
299
  border-bottom: 2px solid black;
300
  border-right: 2px solid black;
301
  position: relative;
302
  top: -22px;
303
  left: 65px;
304
  -webkit-transform: rotate(40deg);
305
  transform: rotate(40deg);
306
  background-color: #FCDB00;
307
  z-index: 1;
308
}
309
 
310
 
311
.shirt-1 {
312
  width: 65px;
313
  height: 40px;
314
  background-color: #FFF;
315
  border: 2px solid black;
316
  -webkit-transform: rotate(10deg);
317
  transform: rotate(10deg);
318
  -webkit-border-bottom-left-radius: 20% 40%;
319
  -moz-border-radius-bottomleft: 20% 40%;
320
  border-bottom-left-radius: 20% 40%;
321
  -webkit-border-top-left-radius: 20% 40%;
322
  -moz-border-radius-topleft: 20% 40%;
323
  border-top-left-radius: 20% 40%;
324
  position: relative;
325
  top: -50px;
326
  left: -4px;
327
  z-index: 1;
328
}
329
 
330
.shirt-1:after {
331
  width: 15px;
332
  height: 30px;
333
  content: '';
334
  background-color: #FFF;
335
  -webkit-border-top-left-radius: 80% 80%;
336
  -moz-border-radius-topleft: 80% 80%;
337
  border-top-left-radius: 80% 80%;
338
  border-top: 2px solid black;
339
  border-left: 2px solid black;
340
  position: absolute;
341
  top: -15px;
342
  left: -2px;
343
}
344
 
345
.shirt-1:before {
346
  width: 20px;
347
  height: 32px;
348
  content: '';
349
  background-color: #FFF;
350
  -webkit-transform: rotate(-10deg);
351
  transform: rotate(-10deg);
352
  -webkit-border-top-right-radius: 80% 80%;
353
  -moz-border-radius-topright: 80% 80%;
354
  border-top-right-radius: 80% 80%;
355
  border-top: 2px solid black;
356
  border: 2px solid black;
357
  position: absolute;
358
  top: -22px;
359
  left: 109px;
360
  z-index: -;
361
}
362
 
363
.shirt-2:before {
364
  width: 245px;
365
  height: 155px;
366
  content: '';
367
  -webkit-border-top-right-radius: 50% 100%;
368
  /*-moz-border-radius-topright: 50% 100%;
369
  border-top-right-radius: 50% 100%;*/
370
  -webkit-border-top-left-radius: 10% 70%;
371
  -moz-border-radius-topleft: 10% 70%;
372
  border-top-left-radius: 10% 70%;
373
  -webkit-border-bottom-right-radius: 50% 20%;
374
  /*-moz-border-radius-bottomright: 50% 20%;
375
  border-bottom-right-radius: 50% 20%;*/
376
  -webkit-border-bottom-left-radius: 50% 20%;
377
  -moz-border-radius-bottomleft: 50% 20%;
378
  border-bottom-left-radius: 50% 20%;
379
  border: 2px solid black;
380
  position: absolute;
381
  top: 115px;
382
  left: -30px;
383
  background-color: #FFF;
384
  z-index: -1;
385
}
386
 
387
.shirt-2 {
388
  width: 150px;
389
  height: 124px;
390
  -webkit-border-top-right-radius: 50% 100%;
391
  -moz-border-radius-topright: 50% 100%;
392
  border-top-right-radius: 50% 100%;
393
  -webkit-border-top-left-radius: 20% 50%;
394
  -moz-border-radius-topleft: 20% 50%;
395
  border-top-left-radius: 20% 50%;
396
  border-top: 2px solid black;
397
  border-left: 2px solid black;
398
  border-right: 2px solid black;
399
  position: relative;
400
  top: -86px;
401
  left: 4px;
402
  background-color: #FFF;
403
}
404
 
405
.shoulder {
406
  -webkit-border-top-left-radius: 50% 90%;
407
  -moz-border-radius-topleft: 50% 90%;
408
  border-top-left-radius: 50% 90%;
409
  -webkit-border-top-right-radius: 50% 90%;
410
  -moz-border-radius-topright: 50% 90%;
411
  border-top-right-radius: 50% 90%;
412
  -webkit-border-bottom-left-radius: 50% 20%;
413
  -moz-border-radius-bottomleft: 50% 20%;
414
  border-bottom-left-radius: 50% 20%;
415
  -webkit-border-bottom-right-radius: 50% 20%;
416
  -moz-border-radius-bottomright: 50% 20%;
417
  border-bottom-right-radius: 50% 20%;
418
  background-color: #FFFFFF;
419
  border: 2px solid black;
420
  position: relative;
421
}
422
 
423
.shoulder.left {
424
  width: 90px;
425
  height: 80px;
426
  -webkit-transform: rotate(10deg);
427
  top: -170px;
428
  left: -50px;
429
  z-index: 2;
430
}
431
 
432
.shoulder.right {
433
  width: 80px;
434
  height: 60px;
435
  top: -240px;
436
  left: 95px;
437
  z-index: -1;
438
}
439
 
440
.arm {
441
  background-color: #FCDB00;
442
  position: relative;
443
  border: 2px solid black;
444
}
445
 
446
.arm.left {
447
  width: 70px;
448
  height: 200px;
449
  -webkit-border-top-left-radius: 20% 40%;
450
  -moz-border-radius-topleft: 20% 40%;
451
  border-top-left-radius: 20% 40%;
452
  -webkit-border-bottom-left-radius: 30% 80%;
453
  -moz-border-radius-bottomleft: 30% 80%;
454
  border-bottom-left-radius: 30% 80%;
455
  -webkit-border-bottom-right-radius: 10% 40%;
456
  -moz-border-radius-bottomright: 10% 40%;
457
  border-bottom-right-radius: 10% 40%;
458
  top: -260px;
459
  left: -50px;
460
  z-index: 0;
461
}
462
 
463
.arm.left {
464
  -webkit-animation: move-arm 2s;
465
  -webkit-animation-timing-function:linear;
466
  -webkit-animation-iteration-count:infinite;
467
}
468
 
469
.shoulder.left {
470
  -webkit-animation: move-shoulder 2s;
471
  -webkit-animation-timing-function:linear;
472
  -webkit-animation-iteration-count:infinite;
473
}
474
 
475
.arm.right {
476
  width: 40px;
477
  height: 60px;
478
  top: -480px;
479
  left: 130px;
480
  z-index: -2;
481
}
482
 
483
.finger {
484
  height: 40px;
485
  background-color: #FCDB00;
486
  position: relative;
487
  border-left: 2px solid black;
488
  border-right: 2px solid black;
489
  border-bottom: 2px solid black;
490
}
491
 
492
.finger:nth-child(1) {
493
  width: 18px;
494
  -webkit-border-top-left-radius: 30% 10%;
495
  -webkit-border-top-right-radius: 20% 10%;
496
  -webkit-border-bottom-left-radius: 50% 50%;
497
  -webkit-border-bottom-right-radius: 50% 50%;
498
  -webkit-transform: rotate(17deg);
499
  left: -36px;
500
  top: 175px;
501
  z-index: 2;
502
}
503
 
504
.finger:nth-child(2) {
505
  width: 19px;
506
  -webkit-border-top-right-radius: 20% 10%;
507
  -moz-border-radius-topright: 20% 10%;
508
  border-top-right-radius: 20% 10%;
509
  -webkit-border-bottom-left-radius: 50% 50%;
510
  -moz-border-radius-bottomleft: 50% 50%;
511
  border-bottom-left-radius: 50% 50%;
512
  -webkit-border-bottom-right-radius: 50% 50%;
513
  -moz-border-radius-bottomright: 50% 50%;
514
  border-bottom-right-radius: 50% 50%;
515
  -webkit-transform: rotate(17deg);
516
  transform: rotate(17deg);
517
  left: -18px;
518
  top: 139px;
519
  z-index: 1;
520
}
521
 
522
.finger:nth-child(3) {
523
  width: 19px;
524
  -webkit-border-top-right-radius: 20% 20%;
525
  border-top-right-radius: 20% 20%;
526
  -moz-border-radius-topright: 20% 20%;
527
  -webkit-border-bottom-left-radius: 40% 40%;
528
  -moz-border-radius-bottomleft: 40% 40%;
529
  border-bottom-left-radius: 40% 40%;
530
  -webkit-border-bottom-right-radius: 60% 40%;
531
  -moz-border-radius-bottomright: 60% 40%;
532
  border-bottom-right-radius: 60% 40%;
533
  -webkit-transform: rotate(17deg);
534
  transform: rotate(17deg);
535
  border-left: none;
536
  left: 4px;
537
  top: 95px;
538
  z-index: 0;
539
}
540
 
541
.waist {
542
  width: 220px;
543
  height: 100px;
544
  -webkit-border-bottom-right-radius: 50% 90%;
545
  -moz-border-radius-bottomright: 50% 90%;
546
  border-bottom-right-radius: 50% 90%;
547
  background-color: #2B4FD0;
548
  border-right: 2px solid black;
549
  border-left: 2px solid black;
550
  position: relative;
551
  top: -380px;
552
  left: -20px;
553
  z-index: -2;
554
}
555
 
556
.leg.left {
557
  width: 110px;
558
  height: 200px;
559
  -webkit-border-top-right-radius: 20% 10%;
560
  -moz-border-radius-topright: 20% 10%;
561
  border-top-right-radius: 20% 10%;
562
  position: relative;
563
  top: -400px;
564
  left: -20px;
565
  border: 2px solid black;
566
  border-top: none;
567
  background-color: #2B4FD0;
568
  z-index: -1;
569
}
570
 
571
.leg.left:after {
572
  width: 110px;
573
  content: '';
574
  position: absolute;
575
  top: 180px;
576
  border-top: 2px solid black;
577
  background-color: #2B4FD0;
578
}
579
 
580
.leg.right {
581
  width: 97px;
582
  height: 200px;
583
  position: relative;
584
  top: -630px;
585
  left: 80px;
586
  border: 2px solid black;
587
  background-color: #2B4FD0;
588
  z-index: -3;
589
}
590
 
591
.leg.right:after {
592
  width: 97px;
593
  content: '';
594
  position: absolute;
595
  top: 180px;
596
  border-top: 2px solid black;
597
  background-color: #2B4FD0;
598
}
599
 
600
.shoe {
601
  width: 120px;
602
  height: 60px;
603
  -webkit-border-bottom-right-radius: 80% 50%;
604
  -moz-border-radius-bottomright: 80% 50%;
605
  border-bottom-right-radius: 80% 50%;
606
  -webkit-border-top-right-radius: 70% 50%;
607
  -moz-border-radius-topright: 70% 50%;
608
  border-top-right-radius: 70% 50%;
609
  -webkit-transform: rotate(15deg);
610
  transform: rotate(15deg);
611
  border: 2px solid black;
612
  position: relative;
613
  background-color: #4D524E;
614
}
615
 
616
.shoe:after {
617
  width: 40px;
618
  height: 56px;
619
  content: '';
620
  -webkit-border-top-left-radius: 30% 30%;
621
  -moz-border-radius-topleft: 30% 30%;
622
  border-top-left-radius: 30% 30%;
623
  -webkit-border-bottom-right-radius: 30% 20%;
624
  -moz-border-radius-bottomright: 30% 20%;
625
  border-bottom-right-radius: 30% 20%;
626
  -webkit-border-bottom-left-radius: 10% 20%;
627
  -moz-border-radius-bottomleft: 10% 20%;
628
  border-bottom-left-radius: 10% 20%;
629
  -webkit-transform: rotate(-10deg);
630
  transform: rotate(-10deg);
631
  border: 2px solid black;
632
  border-right: none;
633
  background-color: #4D524E;
634
  position: absolute;
635
  top: 15px;
636
  left: -30px;
637
}
638
 
639
.shoe.left {
640
  top: -610px;
641
  left: 7px;
642
  z-index: -2;
643
}
644
 
645
.shoe.right {
646
  top: -699px;
647
  left: 110px;
648
  z-index: -4;
649
}
650
 
651
/* -- Eye iris movement -- */
652
 
653
@-webkit-keyframes move {
654
  0%   { -webkit-transform: translate3d(0, 0, 0); }
655
  25%  { -webkit-transform: translate3d(-200%, 0, 0); }
656
  50%  { -webkit-transform: translate3d(-100%, 0, 0); }
657
  50%  { -webkit-transform: translate3d(100%, 0, 0); }
658
  75%  { -webkit-transform: translate3d(150%, 0, 0); }
659
  100% { -webkit-transform: translate3d(0, 0, 0); }
660
}
661
 
662
@-moz-keyframes move {
663
  0%   { -webkit-transform: translate3d(0, 0, 0); }
664
  25%  { -webkit-transform: translate3d(-200%, 0, 0); }
665
  50%  { -webkit-transform: translate3d(-100%, 0, 0); }
666
  50%  { -webkit-transform: translate3d(100%, 0, 0); }
667
  75%  { -webkit-transform: translate3d(150%, 0, 0); }
668
  100% { -webkit-transform: translate3d(0, 0, 0); }
669
}
670
 
671
@keyframes move {
672
  0%   { -webkit-transform: translate3d(0, 0, 0); }
673
  25%  { -webkit-transform: translate3d(-200%, 0, 0); }
674
  50%  { -webkit-transform: translate3d(-100%, 0, 0); }
675
  50%  { -webkit-transform: translate3d(100%, 0, 0); }
676
  75%  { -webkit-transform: translate3d(150%, 0, 0); }
677
  100% { -webkit-transform: translate3d(0, 0, 0); }
678
}
679
 
680
/* -- Left arm movement -- */
681
 
682
@-webkit-keyframes move-arm {
683
  0%   { }
684
  25%  { top: -270px }
685
  50%  { -webkit-transform: rotate(-30deg); left: 25px; }
686
  75%  { top: -270px }
687
  100% { }
688
}
689
 
690
@-moz-keyframes move-arm {
691
  0%   { }
692
  25%  { top: -270px }
693
  50%  { -webkit-transform: rotate(-30deg); left: 25px; }
694
  75%  { top: -270px }
695
  100% { }
696
}
697
 
698
@keyframes move-arm {
699
  0%   { }
700
  25%  { top: -270px }
701
  50%  { -webkit-transform: rotate(-30deg); left: 25px; }
702
  75%  { top: -270px }
703
  100% { }
704
}
705
 
706
/* -- Left shoulder movement -- */
707
 
708
@-webkit-keyframes move-shoulder {
709
  0%   { -webkit-transform: rotate(10deg); }
710
  25%  { -webkit-transform: rotate(0); }
711
  50%  { -webkit-transform: rotate(-20deg); left: -35px;}
712
  75%  { -webkit-transform: rotate(0); }
713
  100% { -webkit-transform: rotate(10deg); }
714
}
715
 
716
@-moz-keyframes move-shoulder {
717
  0%   { -webkit-transform: rotate(10deg); }
718
  25%  { -webkit-transform: rotate(0); }
719
  50%  { -webkit-transform: rotate(-20deg); left: -35px;}
720
  75%  { -webkit-transform: rotate(0); }
721
  100% { -webkit-transform: rotate(10deg); }
722
}
723
 
724
@keyframes move-shoulder {
725
  0%   { -webkit-transform: rotate(10deg); }
726
  25%  { -webkit-transform: rotate(0); }
727
  50%  { -webkit-transform: rotate(-20deg); left: -35px;}
728
  75%  { -webkit-transform: rotate(0); }
729
  100% { -webkit-transform: rotate(10deg); }
730
}
 

Full Homer CSS

CSSDeck G+