www.lagonlon.com

Artikel

Contoh Animasi Dengan CSS



Animasi Bola Pantul


Kode pada halaman html

<img id="animasi" src="ball.png"/>
<div style='position:absolute;left:0%;bottom:0%;height:7%;width:95%;background-color:#729fcf'> </div>

Kode pada halaman css:

#animasi
{
animation: animate 4s infinite;
}


@keyframes animate
{
0%{position:absolute; left:5%; bottom:5%;}
1%{position:absolute; left:6.6%; bottom:11.272%;}
2%{position:absolute; left:8.2%; bottom:17.288%;}
3%{position:absolute; left:9.8%; bottom:23.048%;}
4%{position:absolute; left:11.4%; bottom:28.552%;}
5%{position:absolute; left:13%; bottom:33.8%;}
6%{position:absolute; left:14.6%; bottom:38.792%;}
7%{position:absolute; left:16.2%; bottom:43.528%;}
8%{position:absolute; left:17.8%; bottom:48.008%;}
9%{position:absolute; left:19.4%; bottom:52.232%;}
10%{position:absolute; left:21%; bottom:56.2%;}
11%{position:absolute; left:22.6%; bottom:59.912%;}
12%{position:absolute; left:24.2%; bottom:63.368%;}
13%{position:absolute; left:25.8%; bottom:66.568%;}
14%{position:absolute; left:27.4%; bottom:69.512%;}
15%{position:absolute; left:29%; bottom:72.2%;}
16%{position:absolute; left:30.6%; bottom:74.632%;}
17%{position:absolute; left:32.2%; bottom:76.808%;}
18%{position:absolute; left:33.8%; bottom:78.728%;}
19%{position:absolute; left:35.4%; bottom:80.392%;}
20%{position:absolute; left:37%; bottom:81.8%;}
21%{position:absolute; left:38.6%; bottom:82.952%;}
22%{position:absolute; left:40.2%; bottom:83.848%;}
23%{position:absolute; left:41.8%; bottom:84.488%;}
24%{position:absolute; left:43.4%; bottom:84.872%;}
25%{position:absolute; left:45%; bottom:85%;}
26%{position:absolute; left:46.6%; bottom:84.872%;}
27%{position:absolute; left:48.2%; bottom:84.488%;}
28%{position:absolute; left:49.8%; bottom:83.848%;}
29%{position:absolute; left:51.4%; bottom:82.952%;}
30%{position:absolute; left:53%; bottom:81.8%;}
31%{position:absolute; left:54.6%; bottom:80.392%;}
32%{position:absolute; left:56.2%; bottom:78.728%;}
33%{position:absolute; left:57.8%; bottom:76.808%;}
34%{position:absolute; left:59.4%; bottom:74.632%;}
35%{position:absolute; left:61%; bottom:72.2%;}
36%{position:absolute; left:62.6%; bottom:69.512%;}
37%{position:absolute; left:64.2%; bottom:66.568%;}
38%{position:absolute; left:65.8%; bottom:63.368%;}
39%{position:absolute; left:67.4%; bottom:59.912%;}
40%{position:absolute; left:69%; bottom:56.2%;}
41%{position:absolute; left:70.6%; bottom:52.232%;}
42%{position:absolute; left:72.2%; bottom:48.008%;}
43%{position:absolute; left:73.8%; bottom:43.528%;}
44%{position:absolute; left:75.4%; bottom:38.792%;}
45%{position:absolute; left:77%; bottom:33.8%;}
46%{position:absolute; left:78.6%; bottom:28.552%;}
47%{position:absolute; left:80.2%; bottom:23.048%;}
48%{position:absolute; left:81.8%; bottom:17.288%;}
49%{position:absolute; left:83.4%; bottom:11.272%;}
50%{position:absolute; left:85%; bottom:5%;}
51%{position:absolute; left:83.4%; bottom:11.272%;}
52%{position:absolute; left:81.8%; bottom:17.288%;}
53%{position:absolute; left:80.2%; bottom:23.048%;}
54%{position:absolute; left:78.6%; bottom:28.552%;}
55%{position:absolute; left:77%; bottom:33.8%;}
56%{position:absolute; left:75.4%; bottom:38.792%;}
57%{position:absolute; left:73.8%; bottom:43.528%;}
58%{position:absolute; left:72.2%; bottom:48.008%;}
59%{position:absolute; left:70.6%; bottom:52.232%;}
60%{position:absolute; left:69%; bottom:56.2%;}
61%{position:absolute; left:67.4%; bottom:59.912%;}
62%{position:absolute; left:65.8%; bottom:63.368%;}
63%{position:absolute; left:64.2%; bottom:66.568%;}
64%{position:absolute; left:62.6%; bottom:69.512%;}
65%{position:absolute; left:61%; bottom:72.2%;}
66%{position:absolute; left:59.4%; bottom:74.632%;}
67%{position:absolute; left:57.8%; bottom:76.808%;}
68%{position:absolute; left:56.2%; bottom:78.728%;}
69%{position:absolute; left:54.6%; bottom:80.392%;}
70%{position:absolute; left:53%; bottom:81.8%;}
71%{position:absolute; left:51.4%; bottom:82.952%;}
72%{position:absolute; left:49.8%; bottom:83.848%;}
73%{position:absolute; left:48.2%; bottom:84.488%;}
74%{position:absolute; left:46.6%; bottom:84.872%;}
75%{position:absolute; left:45%; bottom:85%;}
76%{position:absolute; left:43.4%; bottom:84.872%;}
77%{position:absolute; left:41.8%; bottom:84.488%;}
78%{position:absolute; left:40.2%; bottom:83.848%;}
79%{position:absolute; left:38.6%; bottom:82.952%;}
80%{position:absolute; left:37%; bottom:81.8%;}
81%{position:absolute; left:35.4%; bottom:80.392%;}
82%{position:absolute; left:33.8%; bottom:78.728%;}
83%{position:absolute; left:32.2%; bottom:76.808%;}
84%{position:absolute; left:30.6%; bottom:74.632%;}
85%{position:absolute; left:29%; bottom:72.2%;}
86%{position:absolute; left:27.4%; bottom:69.512%;}
87%{position:absolute; left:25.8%; bottom:66.568%;}
88%{position:absolute; left:24.2%; bottom:63.368%;}
89%{position:absolute; left:22.6%; bottom:59.912%;}
90%{position:absolute; left:21%; bottom:56.2%;}
91%{position:absolute; left:19.4%; bottom:52.232%;}
92%{position:absolute; left:17.8%; bottom:48.008%;}
93%{position:absolute; left:16.2%; bottom:43.528%;}
94%{position:absolute; left:14.6%; bottom:38.792%;}
95%{position:absolute; left:13%; bottom:33.8%;}
96%{position:absolute; left:11.4%; bottom:28.552%;}
97%{position:absolute; left:9.8%; bottom:23.048%;}
98%{position:absolute; left:8.2%; bottom:17.288%;}
99%{position:absolute; left:6.6%; bottom:11.272%;}
100%{position:absolute; left:5%; bottom:5%;}
}




open your eyes, you will see nothing
open your mind, you will be confused
open your hearth, you will see


Pengunjung:
2 6 1 6 2
www.lagonlon.com