KODLAR HTML:
Merhaba Ben geldim
KODLAR CSS:
p {text-align: center;}
.girl {
width:174px;
height:380px;
background:
url(http://dl.dropbox.com/u/33759278/monitaSpriteR2/spriteSheet/jumpSpriteSheet4.png) 0 0 no-repeat;
margin: 0px auto 0;
background-position: -2466px -1530px;
animation: jumping 2.8s steps(1, end) infinite;
-webkit-animation: jumping 2.8s steps(1, end) infinite;
-moz-animation: jumping 2.8s steps(1, end) infinite;
}
keyframes jumping {
1% { background-position: -2466px -1530px;}
2.16% { background-position: -2466px -1148px;}
3.32% { background-position: -2290px -1530px;}
4.48% { background-position: -2290px -1148px;}
5.64% { background-position: -2114px -1530px;}
6.80% { background-position: -2114px -1148px;}
7.96% { background-position: -2466px -766px;}
9.12% { background-position: -2290px -766px;}
10.28% { background-position: -2114px -766px;}
11.44% { background-position: -1938px -1530px;}
12.60% { background-position: -1938px -1530px;}
13.76% { background-position: -1938px -1148px;}
14.92% { background-position: -1938px -766px;}
16.08% { background-position: -1762px -1530px;}
17.24% { background-position: -1762px -1148px;}
18.40% { background-position: -1762px -766px;}
19.56% { background-position: -2466px -384px;}
20.72% { background-position: -2290px -384px;}
21.88% { background-position: -2114px -384px;}
23.04% { background-position: -1938px -384px;}
24.20% { background-position: -1762px -384px;}
25.36% { background-position: -1586px -1530px;}
26.52% { background-position: -1586px -1148px;}
27.68% { background-position: -1586px -766px;}
28.84% { background-position: -1586px -384px;}
30.00% { background-position: -1410px -1530px;}
31.16% { background-position: -1410px -1148px;}
32.32% { background-position: -1410px -766px;}
33.48% { background-position: -1410px -384px;}
34.63% { background-position: -1234px -1530px;}
35.79% { background-position: -1234px -1148px;}
36.95% { background-position: -1234px -766px;}
38.11% { background-position: -1234px -384px;}
39.27% { background-position: -2466px -2px;}
40.43% { background-position: -2290px -2px;}
41.59% { background-position: -2114px -2px;}
42.75% { background-position: -1938px -2px;}
43.91% { background-position: -1762px -2px;}
45.07% { background-position: -1586px -2px;}
46.23% { background-position: -1410px -2px;}
47.39% { background-position: -1234px -2px;}
48.55% { background-position: -1058px -1530px;}
49.71% { background-position: -1058px -1148px;}
50.87% { background-position: -1058px -766px;}
52.03% { background-position: -1058px -384px;}
53.19% { background-position: -1058px -2px;}
54.35% { background-position: -882px -1530px;}
55.51% { background-position: -882px -1148px;}
56.67% { background-position: -882px -766px;}
57.83% { background-position: -882px -384px;}
58.99% { background-position: -882px -2px;}
60.15% { background-position: -706px -1530px;}
61.31% { background-position: -706px -1148px;}
62.47% { background-position: -706px -766px;}
63.63% { background-position: -706px -384px;}
64.79% { background-position: -706px -2px;}
65.95% { background-position: -530px -1530px;}
67.11% { background-position: -530px -1148px;}
68.27% { background-position: -530px -766px;}
69.43% { background-position: -530px -384px;}
70.59% { background-position: -530px -2px;}
71.75% { background-position: -354px -1530px;}
72.91% { background-position: -354px -1148px;}
74.07% { background-position: -354px -766px;}
75.23% { background-position: -354px -384px;}
76.39% { background-position: -354px -2px;}
77.55% { background-position: -178px -1530px;}
78.71% { background-position: -178px -1148px;}
79.87% { background-position: -178px -766px;}
81.03% { background-position: -178px -384px;}
82.19% { background-position: -178px -2px;}
83.35% { background-position: -2px -1530px;}
84.51% { background-position: -2px -1148px;}
85.67% { background-position: -2px -766px;}
86.83% { background-position: -2px -384px;}
87.99% { background-position: -2px -2px;}
89.15% { background-position: -2px -2px;}
90.31% { background-position: -2px -2px;}
91.47% { background-position: -2px -2px;}
92.63% { background-position: -2px -2px;}
93.79% { background-position: -2px -2px;}
94.95% { background-position: -2px -2px;}
96.11% { background-position: -2px -2px;}
97.27% { background-position: -2px -2px;}
98.43% { background-position: -2px -2px;}
99.59% { background-position: -2px -2px;}
100% { background-position: -2px -2px;}
}
@-webkit-keyframes jumping {
1% { background-position: -2466px -1530px;}
2.16% { background-position: -2466px -1148px;}
3.32% { background-position: -2290px -1530px;}
4.48% { background-position: -2290px -1148px;}
5.64% { background-position: -2114px -1530px;}
6.80% { background-position: -2114px -1148px;}
7.96% { background-position: -2466px -766px;}
9.12% { background-position: -2290px -766px;}
10.28% { background-position: -2114px -766px;}
11.44% { background-position: -1938px -1530px;}
12.60% { background-position: -1938px -1530px;}
13.76% { background-position: -1938px -1148px;}
14.92% { background-position: -1938px -766px;}
16.08% { background-position: -1762px -1530px;}
17.24% { background-position: -1762px -1148px;}
18.40% { background-position: -1762px -766px;}
19.56% { background-position: -2466px -384px;}
20.72% { background-position: -2290px -384px;}
21.88% { background-position: -2114px -384px;}
23.04% { background-position: -1938px -384px;}
24.20% { background-position: -1762px -384px;}
25.36% { background-position: -1586px -1530px;}
26.52% { background-position: -1586px -1148px;}
27.68% { background-position: -1586px -766px;}
28.84% { background-position: -1586px -384px;}
30.00% { background-position: -1410px -1530px;}
31.16% { background-position: -1410px -1148px;}
32.32% { background-position: -1410px -766px;}
33.48% { background-position: -1410px -384px;}
34.63% { background-position: -1234px -1530px;}
35.79% { background-position: -1234px -1148px;}
36.95% { background-position: -1234px -766px;}
38.11% { background-position: -1234px -384px;}
39.27% { background-position: -2466px -2px;}
40.43% { background-position: -2290px -2px;}
41.59% { background-position: -2114px -2px;}
42.75% { background-position: -1938px -2px;}
43.91% { background-position: -1762px -2px;}
45.07% { background-position: -1586px -2px;}
46.23% { background-position: -1410px -2px;}
47.39% { background-position: -1234px -2px;}
48.55% { background-position: -1058px -1530px;}
49.71% { background-position: -1058px -1148px;}
50.87% { background-position: -1058px -766px;}
52.03% { background-position: -1058px -384px;}
53.19% { background-position: -1058px -2px;}
54.35% { background-position: -882px -1530px;}
55.51% { background-position: -882px -1148px;}
56.67% { background-position: -882px -766px;}
57.83% { background-position: -882px -384px;}
58.99% { background-position: -882px -2px;}
60.15% { background-position: -706px -1530px;}
61.31% { background-position: -706px -1148px;}
62.47% { background-position: -706px -766px;}
63.63% { background-position: -706px -384px;}
64.79% { background-position: -706px -2px;}
65.95% { background-position: -530px -1530px;}
67.11% { background-position: -530px -1148px;}
68.27% { background-position: -530px -766px;}
69.43% { background-position: -530px -384px;}
70.59% { background-position: -530px -2px;}
71.75% { background-position: -354px -1530px;}
72.91% { background-position: -354px -1148px;}
74.07% { background-position: -354px -766px;}
75.23% { background-position: -354px -384px;}
76.39% { background-position: -354px -2px;}
77.55% { background-position: -178px -1530px;}
78.71% { background-position: -178px -1148px;}
79.87% { background-position: -178px -766px;}
81.03% { background-position: -178px -384px;}
82.19% { background-position: -178px -2px;}
83.35% { background-position: -2px -1530px;}
84.51% { background-position: -2px -1148px;}
85.67% { background-position: -2px -766px;}
86.83% { background-position: -2px -384px;}
87.99% { background-position: -2px -2px;}
89.15% { background-position: -2px -2px;}
90.31% { background-position: -2px -2px;}
91.47% { background-position: -2px -2px;}
92.63% { background-position: -2px -2px;}
93.79% { background-position: -2px -2px;}
94.95% { background-position: -2px -2px;}
96.11% { background-position: -2px -2px;}
97.27% { background-position: -2px -2px;}
98.43% { background-position: -2px -2px;}
99.59% { background-position: -2px -2px;}
100% { background-position: -2px -2px;}
}
@-moz-keyframes jumping {
1% { background-position: -2466px -1530px;}
2.16% { background-position: -2466px -1148px;}
3.32% { background-position: -2290px -1530px;}
4.48% { background-position: -2290px -1148px;}
5.64% { background-position: -2114px -1530px;}
6.80% { background-position: -2114px -1148px;}
7.96% { background-position: -2466px -766px;}
9.12% { background-position: -2290px -766px;}
10.28% { background-position: -2114px -766px;}
11.44% { background-position: -1938px -1530px;}
12.60% { background-position: -1938px -1530px;}
13.76% { background-position: -1938px -1148px;}
14.92% { background-position: -1938px -766px;}
16.08% { background-position: -1762px -1530px;}
17.24% { background-position: -1762px -1148px;}
18.40% { background-position: -1762px -766px;}
19.56% { background-position: -2466px -384px;}
20.72% { background-position: -2290px -384px;}
21.88% { background-position: -2114px -384px;}
23.04% { background-position: -1938px -384px;}
24.20% { background-position: -1762px -384px;}
25.36% { background-position: -1586px -1530px;}
26.52% { background-position: -1586px -1148px;}
27.68% { background-position: -1586px -766px;}
28.84% { background-position: -1586px -384px;}
30.00% { background-position: -1410px -1530px;}
31.16% { background-position: -1410px -1148px;}
32.32% { background-position: -1410px -766px;}
33.48% { background-position: -1410px -384px;}
34.63% { background-position: -1234px -1530px;}
35.79% { background-position: -1234px -1148px;}
36.95% { background-position: -1234px -766px;}
38.11% { background-position: -1234px -384px;}
39.27% { background-position: -2466px -2px;}
40.43% { background-position: -2290px -2px;}
41.59% { background-position: -2114px -2px;}
42.75% { background-position: -1938px -2px;}
43.91% { background-position: -1762px -2px;}
45.07% { background-position: -1586px -2px;}
46.23% { background-position: -1410px -2px;}
47.39% { background-position: -1234px -2px;}
48.55% { background-position: -1058px -1530px;}
49.71% { background-position: -1058px -1148px;}
50.87% { background-position: -1058px -766px;}
52.03% { background-position: -1058px -384px;}
53.19% { background-position: -1058px -2px;}
54.35% { background-position: -882px -1530px;}
55.51% { background-position: -882px -1148px;}
56.67% { background-position: -882px -766px;}
57.83% { background-position: -882px -384px;}
58.99% { background-position: -882px -2px;}
60.15% { background-position: -706px -1530px;}
61.31% { background-position: -706px -1148px;}
62.47% { background-position: -706px -766px;}
63.63% { background-position: -706px -384px;}
64.79% { background-position: -706px -2px;}
65.95% { background-position: -530px -1530px;}
67.11% { background-position: -530px -1148px;}
68.27% { background-position: -530px -766px;}
69.43% { background-position: -530px -384px;}
70.59% { background-position: -530px -2px;}
71.75% { background-position: -354px -1530px;}
72.91% { background-position: -354px -1148px;}
74.07% { background-position: -354px -766px;}
75.23% { background-position: -354px -384px;}
76.39% { background-position: -354px -2px;}
77.55% { background-position: -178px -1530px;}
78.71% { background-position: -178px -1148px;}
79.87% { background-position: -178px -766px;}
81.03% { background-position: -178px -384px;}
82.19% { background-position: -178px -2px;}
83.35% { background-position: -2px -1530px;}
84.51% { background-position: -2px -1148px;}
85.67% { background-position: -2px -766px;}
86.83% { background-position: -2px -384px;}
87.99% { background-position: -2px -2px;}
89.15% { background-position: -2px -2px;}
90.31% { background-position: -2px -2px;}
91.47% { background-position: -2px -2px;}
92.63% { background-position: -2px -2px;}
93.79% { background-position: -2px -2px;}
94.95% { background-position: -2px -2px;}
96.11% { background-position: -2px -2px;}
97.27% { background-position: -2px -2px;}
98.43% { background-position: -2px -2px;}
99.59% { background-position: -2px -2px;}
100% { background-position: -2px -2px;}
}
DEMO