source: pro-violet-viettel/sourcecode/assets/css/animation-404.css @ 892

Last change on this file since 892 was 387, checked in by dungnv, 11 years ago
  • Property svn:mime-type set to text/plain
File size: 14.6 KB
Line 
1.fix-wrp{
2        position: fixed;
3        height: 100%;
4        width: 100%;
5        z-index: -111;
6}
7.animate-wrp {
8        background: #8fd7f1;
9        position: absolute;
10        top: 0px;
11        left: 0px;
12        z-index: -1;
13        overflow: hidden;
14        height: 800px;
15        width: 100%;
16}
17.sky {
18        position: absolute;
19        height: 3000px;
20        width: 4000px;
21        bottom: 0px;
22        left: 0px;
23        border: 1px solid;
24}
25.sky > div,
26.animate {
27        background-repeat: repeat-x;
28        /* background-size: contain; */
29        background-size: auto 100%;
30        position: absolute;
31        background-position: 0 0;
32        -webkit-animation-iteration-count: infinite;
33        -moz-animation-iteration-count: infinite;
34        -ms-animation-iteration-count: infinite;
35        -o-animation-iteration-count: infinite;
36        animation-iteration-count: infinite;
37        -webkit-animation-timing-function: linear;
38        -moz-animation-timing-function: linear;
39        -ms-animation-timing-function: linear;
40        -o-animation-timing-function: linear;
41        animation-timing-function: linear;
42}
43
44.c1,
45.car,
46.car-wheels {
47        width: 180px;
48        bottom: 110px;
49        left: 70px;
50        position: absolute;
51        z-index: 7;
52}
53.car-wheels {
54        z-index: 8;
55        bottom: 90px;
56}
57.c1 { left: 600px; bottom: 90px; z-index: 9; }
58.car-wheels.c1 { z-index: 10; bottom: 75px; }
59.msg {
60        position: absolute;
61        width: 220px;
62        height: 200px;
63        top: -165px;
64        left: 0;
65        background: url(images/404/text-bubble.png) no-repeat;
66        background-size: 100%;
67}
68.msg b {
69        position: absolute;
70        width: 100%;
71        text-align: center;
72}
73.msg b span { display: block;}
74
75.road-front,
76.road {
77        height: 150px;
78        background-color: #333;
79        position: absolute;
80        bottom: 0px;
81        left: 0px;
82        z-index: 0;
83        width: 100%;
84}
85.road-front {
86        height: 60px;
87        background-color: #72521e;
88}
89.grass, .grass1, .tree, .mountain, .mountain1 {
90        bottom: 150px;
91}
92.grass2 { bottom: 0px; z-index: 16; }
93.tree {}
94.tree-front { bottom: 15px; z-index: 15; }
95.mountain, .mountain1 {}
96
97.cloud { bottom: 15%; }
98.cloud1 { bottom: 24%; }
99.cloud2 { bottom: 20%; }
100
101
102/* Grass
103=========================== */
104@-moz-keyframes grass {
105        0% { background-position: 0 bottom; }
106        100% { background-position: -1100px bottom; }
107}
108@-webkit-keyframes grass {
109        0% { background-position: 0 bottom; }
110        100% { background-position: -1100px bottom; }
111}
112@-o-keyframes grass {
113        0% { background-position: 0 bottom; }
114        100% { background-position: -1100px bottom; }
115}
116@-ms-keyframes grass {
117        0% { background-position: 0 bottom; }
118        100% { background-position: -1100px bottom; }
119}
120@keyframes grass {
121        0% { background-position: 0 bottom; }
122        100% { background-position: -1100px bottom; }
123}
124.grass {
125        position: absolute;
126        background: url(images/404/grass1.png) repeat-x;
127        height: 76px;
128        width: 100%;
129        left: 0px;
130        z-index: 1;
131        -webkit-animation-name: grass;
132        -moz-animation-name: grass;
133        -ms-animation-name: grass;
134        -o-animation-name: grass;
135        animation-name: grass;
136        -webkit-animation-duration: 14s;
137        -moz-animation-duration: 14s;
138        -ms-animation-duration: 14s;
139        -o-animation-duration: 14s;
140        animation-duration: 14s;
141}
142
143@-moz-keyframes grass1 {
144        0% { background-position: 0 0; }
145        100% { background-position: -876px 0; }
146}
147@-webkit-keyframes grass1 {
148        0% { background-position: 0 0; }
149        100% { background-position: -876px 0; }
150}
151@-o-keyframes grass1 {
152        0% { background-position: 0 0; }
153        100% { background-position: -876px 0; }
154}
155@-ms-keyframes grass1 {
156        0% { background-position: 0 0; }
157        100% { background-position: -876px 0; }
158}
159@keyframes grass1 {
160        0% { background-position: 0 0; }
161        100% { background-position: -876px 0; }
162}
163.grass1 {
164        background: url(images/404/grass2.png);
165        left: 0px;
166        width: 100%;
167        height: 73px;
168        z-index: 3;
169        -webkit-animation-name: grass1;
170        -moz-animation-name: grass1;
171        -ms-animation-name: grass1;
172        -o-animation-name: grass1;
173        animation-name: grass1;
174        -webkit-animation-duration: 10.4s;
175        -moz-animation-duration: 10.4s;
176        -ms-animation-duration: 10.4s;
177        -o-animation-duration: 10.4s;
178        animation-duration: 10.4s;
179}
180
181@-moz-keyframes grass2 {
182        0% { background-position: 0 bottom; }
183        100% { background-position: -1189px bottom; }
184}
185@-webkit-keyframes grass2 {
186        0% { background-position: 0 bottom; }
187        100% { background-position: -1189px bottom; }
188}
189@-o-keyframes grass2 {
190        0% { background-position: 0 bottom; }
191        100% { background-position: -1189px bottom; }
192}
193@-ms-keyframes grass2 {
194        0% { background-position: 0 bottom; }
195        100% { background-position: -1189px bottom; }
196}
197@keyframes grass2 {
198        0% { background-position: 0 bottom; }
199        100% { background-position: -1189px bottom; }
200}
201.grass2 {
202        position: absolute;
203        background: url(images/404/grass3.png) repeat-x;
204        height: 89px;
205        width: 100%;
206        left: 0px;
207        -webkit-animation-name: grass2;
208        -moz-animation-name: grass2;
209        -ms-animation-name: grass2;
210        -o-animation-name: grass2;
211        animation-name: grass2;
212        -webkit-animation-duration: 28s;
213        -moz-animation-duration: 28s;
214        -ms-animation-duration: 28s;
215        -o-animation-duration: 28s;
216        animation-duration: 28s;
217}
218
219
220/* Tree
221=========================== */
222@-moz-keyframes tree {
223        0% { background-position: 0 0; }
224        100% { background-position: -2302px 0; }
225}
226@-webkit-keyframes tree {
227        0% { background-position: 0 0; }
228        100% { background-position: -2302px 0; }
229}
230@-o-keyframes tree {
231        0% { background-position: 0 0; }
232        100% { background-position: -2302px 0; }
233}
234@-ms-keyframes tree {
235        0% { background-position: 0 0; }
236        100% { background-position: -2302px 0; }
237}
238@keyframes tree {
239        0% { background-position: 0 0; }
240        100% { background-position: -2302px 0; }
241}
242.tree {
243        background: url(images/404/tree.png);
244        width: 100%;
245        height: 181px;
246        position: absolute;
247        z-index: 5;
248        -webkit-animation-name: tree;
249        -moz-animation-name: tree;
250        -ms-animation-name: tree;
251        -o-animation-name: tree;
252        animation-name: tree;
253        -webkit-animation-duration: 20s;
254        -moz-animation-duration: 20s;
255        -ms-animation-duration: 20s;
256        -o-animation-duration: 20s;
257        animation-duration: 20s;
258}
259
260@-moz-keyframes tree-front {
261        0% { background-position: 0 0; }
262        100% { background-position: -1359px 0; }
263}
264@-webkit-keyframes tree-front {
265        0% { background-position: 0 0; }
266        100% { background-position: -1359px 0; }
267}
268@-o-keyframes tree-front {
269        0% { background-position: 0 0; }
270        100% { background-position: -1359px 0; }
271}
272@-ms-keyframes tree-front {
273        0% { background-position: 0 0; }
274        100% { background-position: -1359px 0; }
275}
276@keyframes tree-front {
277        0% { background-position: 0 0; }
278        100% { background-position: -1359px 0; }
279}
280.tree-front {
281        background: url(images/404/tree-front.png);
282        width: 100%;
283        height: 181px;
284        position: absolute;
285        -webkit-animation-name: tree-front;
286        -moz-animation-name: tree-front;
287        -ms-animation-name: tree-front;
288        -o-animation-name: tree-front;
289        animation-name: tree-front;
290        -webkit-animation-duration: 20s;
291        -moz-animation-duration: 20s;
292        -ms-animation-duration: 20s;
293        -o-animation-duration: 20s;
294        animation-duration: 20s;
295}
296
297
298/* Mountain
299=========================== */
300@-moz-keyframes mountain {
301        0% { background-position: 0 0; }
302        100% { background-position: -1275px 0; }
303}
304@-webkit-keyframes mountain {
305        0% { background-position: 0 0; }
306        100% { background-position: -1275px 0; }
307}
308@-o-keyframes mountain {
309        0% { background-position: 0 0; }
310        100% { background-position: -1275px 0; }
311}
312@-ms-keyframes mountain {
313        0% { background-position: 0 0; }
314        100% { background-position: -1275px 0; }
315}
316@keyframes mountain {
317        0% { background-position: 0 0; }
318        100% { background-position: -1275px 0; }
319}
320.mountain {
321        background: url(images/404/mountain.png);
322        left: 0px;
323        width: 100%;
324        height: 105px;
325        z-index: 0;
326        -webkit-animation-name: mountain;
327        -moz-animation-name: mountain;
328        -ms-animation-name: mountain;
329        -o-animation-name: mountain;
330        animation-name: mountain;
331        -webkit-animation-duration: 14s;
332        -moz-animation-duration: 14s;
333        -ms-animation-duration: 14s;
334        -o-animation-duration: 14s;
335        animation-duration: 14s;
336}
337
338@-moz-keyframes mountain1 {
339        0% { background-position: 0 0; }
340        100% { background-position: -1874px 0; }
341}
342@-webkit-keyframes mountain1 {
343        0% { background-position: 0 0; }
344        100% { background-position: -1874px 0; }
345}
346@-o-keyframes mountain1 {
347        0% { background-position: 0 0; }
348        100% { background-position: -1874px 0; }
349}
350@-ms-keyframes mountain1 {
351        0% { background-position: 0 0; }
352        100% { background-position: -1874px 0; }
353}
354@keyframes mountain1 {
355        0% { background-position: 0 0; }
356        100% { background-position: -1874px 0; }
357}
358.mountain1 {
359        background: url(images/404/mountain1.png);
360        left: 0px;
361        width: 100%;
362        height: 171px;
363        z-index: 2;
364        -webkit-animation-name: mountain1;
365        -moz-animation-name: mountain1;
366        -ms-animation-name: mountain1;
367        -o-animation-name: mountain1;
368        animation-name: mountain1;
369        -webkit-animation-duration: 22s;
370        -moz-animation-duration: 22s;
371        -ms-animation-duration: 22s;
372        -o-animation-duration: 22s;
373        animation-duration: 22s;
374}
375
376/* Clouds
377=========================== */
378@-moz-keyframes cloud {
379        0% { background-position: 0 0; }
380        100% { background-position: -600px 0; }
381}
382@-webkit-keyframes cloud {
383        0% { background-position: 0 0; }
384        100% { background-position: -600px 0; }
385}
386@-o-keyframes cloud {
387        0% { background-position: 0 0; }
388        100% { background-position: -600px 0; }
389}
390@-ms-keyframes cloud {
391        0% { background-position: 0 0; }
392        100% { background-position: -600px 0; }
393}
394@keyframes cloud {
395        0% { background-position: 0 0; }
396        100% { background-position: -600px 0; }
397}
398.cloud {
399        position: absolute;
400        background: url(images/404/cloud.png) repeat-x;
401        height: 84px;
402        width: 100%;
403        left: 0px;
404        z-index: 1;
405        -webkit-animation-name: cloud;
406        -moz-animation-name: cloud;
407        -ms-animation-name: cloud;
408        -o-animation-name: cloud;
409        animation-name: cloud;
410        -webkit-animation-duration: 12s;
411        -moz-animation-duration: 12s;
412        -ms-animation-duration: 12s;
413        -o-animation-duration: 12s;
414        animation-duration: 12s;
415}
416
417@-moz-keyframes cloud1 {
418        0% { background-position: 0 bottom; }
419        100% { background-position: -700px bottom; }
420}
421@-webkit-keyframes cloud1 {
422        0% { background-position: 0 bottom; }
423        100% { background-position: -700px bottom; }
424}
425@-o-keyframes cloud1 {
426        0% { background-position: 0 bottom; }
427        100% { background-position: -700px bottom; }
428}
429@-ms-keyframes cloud1 {
430        0% { background-position: 0 bottom; }
431        100% { background-position: -700px bottom; }
432}
433@keyframes cloud1 {
434        0% { background-position: 0 bottom; }
435        100% { background-position: -700px bottom; }
436}
437.cloud1 {
438        position: absolute;
439        background: url(images/404/cloud1.png) repeat-x;
440        background-size: cover;
441        height: 60px;
442        width: 100%;
443        left: 0px;
444        z-index: 1;
445        -webkit-animation-name: cloud1;
446        -moz-animation-name: cloud1;
447        -ms-animation-name: cloud1;
448        -o-animation-name: cloud1;
449        animation-name: cloud1;
450        -webkit-animation-duration: 12s;
451        -moz-animation-duration: 12s;
452        -ms-animation-duration: 12s;
453        -o-animation-duration: 12s;
454        animation-duration: 12s;
455}
456
457@-moz-keyframes cloud2 {
458        0% { background-position: 0 bottom; }
459        100% { background-position: -1200px bottom; }
460}
461@-webkit-keyframes cloud2 {
462        0% { background-position: 0 bottom; }
463        100% { background-position: -1200px bottom; }
464}
465@-o-keyframes cloud2 {
466        0% { background-position: 0 bottom; }
467        100% { background-position: -1200px bottom; }
468}
469@-ms-keyframes cloud2 {
470        0% { background-position: 0 bottom; }
471        100% { background-position: -1200px bottom; }
472}
473@keyframes cloud2 {
474        0% { background-position: 0 bottom; }
475        100% { background-position: -1200px bottom; }
476}
477.cloud2 {
478        position: absolute;
479        background: url(images/404/cloud2.png) repeat-x;
480        height: 30px;
481        width: 100%;
482        left: 0px;
483        z-index: 1;
484        -webkit-animation-name: cloud2;
485        -moz-animation-name: cloud2;
486        -ms-animation-name: cloud2;
487        -o-animation-name: cloud2;
488        animation-name: cloud2;
489        -webkit-animation-duration: 20s;
490        -moz-animation-duration: 20s;
491        -ms-animation-duration: 20s;
492        -o-animation-duration: 20s;
493        animation-duration: 20s;
494}
495
496/* Cars
497=========================== */
498@-moz-keyframes car {
499    0% { -moz-transform: translateY(0); transform: translateY(0); }
500    50% { -moz-transform: translateY(3px); transform: translateY(3px); }
501    100% { -moz-transform: translateY(0); transform: translateY(0); }
502}
503@-webkit-keyframes car {
504    0% { -webkit-transform: translateY(0); transform: translateY(0); }
505    50% { -webkit-transform: translateY(3px); transform: translateY(3px); }
506    100% { -webkit-transform: translateY(0); transform: translateY(0); }
507}
508@-o-keyframes car {
509    0% { -o-transform: translateY(0); transform: translateY(0); }
510    50% { -o-transform: translateY(3px); transform: translateY(3px); }
511    100% { -o-transform: translateY(0); transform: translateY(0); }
512}
513@-ms-keyframes car {
514    0% { -ms-transform: translateY(0); transform: translateY(0); }
515    50% { -ms-transform: translateY(3px); transform: translateY(3px); }
516    100% { -ms-transform: translateY(0); transform: translateY(0); }
517}
518@keyframes car {
519    0% { transform: translateY(0); }
520    50% { transform: translateY(3px); }
521    100% { transform: translateY(0); }
522}
523
524@-moz-keyframes car1 {
525    0% { left: -10%; }
526    50% { left: 50%; }
527    100% { left: 150%; }
528}
529@-webkit-keyframes car1 {
530    0% { left: -10%; }
531    50% { left: 50%; }
532    100% { left: 150%; }
533}
534@-o-keyframes car1 {
535    0% { left: -10%; }
536    50% { left: 50%; }
537    100% { left: 150%; }
538}
539@-ms-keyframes car1 {
540    0% { left: -10%; }
541    50% { left: 50%; }
542    100% { left: 150%; }
543}
544@keyframes car1 {
545    0% { transform: translateY(0); }
546    50% { transform: translateY(3px); }
547    100% { transform: translateY(0); }
548}
549.car-wheels {
550        background-image: url(images/404/car-wheels.png);
551        background-repeat: no-repeat !important;
552        background-position: center bottom !important;
553        height: 39px;
554        width: 204px;
555}
556.car {
557        background-image: url(images/404/car.png);
558        height: 74px;
559        width: 204px;
560        -webkit-animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
561    -moz-animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
562    -ms-animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
563    -o-animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
564    animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
565        -webkit-animation-name: car;
566        -moz-animation-name: car;
567        -ms-animation-name: car;
568        -o-animation-name: car;
569        animation-name: car;
570        -webkit-animation-duration: 0.8s;
571        -moz-animation-duration: 0.8s;
572        -ms-animation-duration: 0.8s;
573        -o-animation-duration: 0.8s;
574        animation-duration: 0.8s;
575}
576.car1 {
577        background: url(images/404/car1.png)  no-repeat;
578        height: 88px;
579        width: 243px;
580}
581.car-wheels.c1 {
582        height: 45px;
583        width: 243px;
584        background-image: url(images/404/car-wheels1.png);
585}
586.c1 {
587        -webkit-animation-name: car1;
588        -moz-animation-name: car1;
589        -ms-animation-name: car1;
590        -o-animation-name: car1;
591        animation-name: car1;
592        -webkit-animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
593    -moz-animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
594    -ms-animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
595    -o-animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
596    animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
597        -webkit-animation-duration: 18s;
598        -moz-animation-duration: 18s;
599        -ms-animation-duration: 18s;
600        -o-animation-duration: 18s;
601        animation-duration: 18s;
602}
Note: See TracBrowser for help on using the repository browser.