SVG2CSS : output files
<!-- Add Your HTML -->
<div class="ball"></div>
/* Add Your CSS */
.ball {
left: 100px;
bottom: 100px;
height: 20px;
width: 20px;
background: white;
border-radius: 50%;
position: absolute;
animation: dropball 2s infinite;
}
@keyframes dropball {
0% {
bottom: 200px;
}
2% {
bottom: 198.89046144485474px;
left: 2.000002145767212px;
}
4% {
bottom: 197.5577425956726px;
left: 4.000004291534424px;
}
6% {
bottom: 195.3596692085266px;
left: 5.999995708465576px;
}
7% {
bottom: 192.5960192680359px;
left: 6.999996662139893px;
}
9% {
bottom: 189.49127101898193px;
left: 8.999999046325684px;
}
10% {
bottom: 186.1709690093994px;
left: 10px;
}
11% {
bottom: 182.70591926574707px;
left: 11.000000953674316px;
}
12% {
bottom: 179.13814735412598px;
left: 12.000001907348633px;
}
13% {
bottom: 175.49418449401855px;
left: 12.999998092651367px;
}
14% {
bottom: 171.79171752929688px;
left: 13.999999046325684px;
}
15% {
bottom: 168.04300498962402px;
left: 15px;
}
16% {
bottom: 160.43976974487305px;
left: 16px;
}
17% {
bottom: 156.59682846069336px;
left: 17.000001907348633px;
}
18% {
bottom: 152.7318572998047px;
left: 17.999998092651367px;
}
19% {
bottom: 144.94751739501953px;
left: 18.999998092651367px;
}
20% {
bottom: 141.03264236450195px;
left: 20px;
}
21% {
bottom: 133.16590881347656px;
left: 21px;
}
22% {
bottom: 129.2165756225586px;
left: 22.000001907348633px;
}
23% {
bottom: 121.2911605834961px;
left: 22.999998092651367px;
}
24% {
bottom: 113.33521270751955px;
left: 23.999998092651367px;
}
25% {
bottom: 105.3537826538086px;
left: 25px;
}
26% {
bottom: 97.35050964355469px;
left: 26px;
}
27% {
bottom: 89.328369140625px;
left: 27.000001907348633px;
}
28% {
bottom: 81.2899169921875px;
left: 27.999998092651367px;
}
29% {
bottom: 73.23715209960938px;
left: 28.999998092651367px;
}
30% {
bottom: 65.17164611816406px;
left: 30px;
}
31% {
bottom: 57.09471130371093px;
left: 31px;
}
32% {
bottom: 49.00764465332031px;
left: 32px;
}
33% {
bottom: 36.85993957519531px;
left: 32.999996185302734px;
}
34% {
bottom: 28.751373291015625px;
left: 34px;
}
35% {
bottom: 16.575027465820312px;
left: 35px;
}
36% {
bottom: 8.449356079101562px;
left: 36px;
}
37% {
bottom: 5.6273956298828125px;
left: 37px;
}
38% {
bottom: 9.474273681640625px;
left: 37.999996185302734px;
}
39% {
bottom: 13.295852661132812px;
left: 39px;
}
40% {
bottom: 17.087554931640625px;
left: 40px;
}
41% {
bottom: 24.556503295898438px;
left: 41px;
}
42% {
bottom: 28.216049194335934px;
left: 42.00000000000001px;
}
43% {
bottom: 31.808395385742188px;
left: 42.999996185302734px;
}
45% {
bottom: 35.3138427734375px;
left: 44.99999999999999px;
}
46% {
bottom: 38.70347595214844px;
left: 46px;
}
47% {
bottom: 41.93290710449219px;
left: 47px;
}
48% {
bottom: 44.93080139160156px;
left: 47.99999618530273px;
}
50% {
bottom: 47.578704833984375px;
left: 50px;
}
52% {
bottom: 49.67784118652344px;
left: 52px;
}
54% {
bottom: 50.92765808105468px;
left: 53.999996185302734px;
}
56% {
bottom: 51.02694702148437px;
left: 56px;
}
58% {
bottom: 49.938507080078125px;
left: 57.999996185302734px;
}
60% {
bottom: 47.933502197265625px;
left: 60px;
}
61% {
bottom: 45.32872009277344px;
left: 61px;
}
63% {
bottom: 42.34429931640625px;
left: 63.000003814697266px;
}
64% {
bottom: 39.11199951171875px;
left: 63.999996185302734px;
}
65% {
bottom: 35.71031188964844px;
left: 65px;
}
66% {
bottom: 32.18757629394531px;
left: 66px;
}
67% {
bottom: 28.575515747070312px;
left: 66.99999237060547px;
}
68% {
bottom: 24.89520263671875px;
left: 68px;
}
69% {
bottom: 21.161895751953125px;
left: 69px;
}
70% {
bottom: 17.3868408203125px;
left: 70px;
}
71% {
bottom: 13.579330444335938px;
left: 71px;
}
72% {
bottom: 5.90618896484375px;
left: 72px;
}
73% {
bottom: 2.0910797119140625px;
left: 73px;
}
74% {
bottom: 3.0439453125px;
left: 74px;
}
75% {
bottom: 6.3134307861328125px;
left: 75px;
}
77% {
bottom: 9.31329345703125px;
left: 76.99999237060547px;
}
79% {
bottom: 11.872848510742188px;
left: 79px;
}
80% {
bottom: 13.68403625488281px;
left: 80px;
}
82% {
bottom: 14.308319091796875px;
left: 82px;
}
84% {
bottom: 13.5106201171875px;
left: 84px;
}
86% {
bottom: 11.5677490234375px;
left: 86px;
}
88% {
bottom: 8.915969848632812px;
left: 88px;
}
89% {
bottom: 5.852020263671875px;
left: 89px;
}
90% {
bottom: 2.5506134033203125px;
left: 90px;
}
92% {
bottom: 0.8137359619140625px;
left: 92px;
}
93% {
bottom: 3.8302154541015625px;
left: 93px;
}
95% {
bottom: 5.7218170166015625px;
left: 94.99999237060547px;
}
97% {
bottom: 5.4010467529296875px;
left: 96.99999237060547px;
}
99% {
bottom: 3.1641998291015625px;
left: 99px;
}
100% {
left: 100px;
}
98% {
left: 97.99999237060547px;
}
96% {
left: 95.99999237060547px;
}
94% {
left: 94px;
}
91% {
left: 91px;
}
87% {
left: 86.99999237060547px;
}
85% {
left: 85px;
}
83% {
left: 83px;
}
81% {
left: 81px;
}
78% {
left: 78px;
}
76% {
left: 76px;
}
62% {
left: 62px;
}
59% {
left: 58.999996185302734px;
}
57% {
left: 56.999996185302734px;
}
55% {
left: 55px;
}
53% {
left: 52.999996185302734px;
}
51% {
left: 51px;
}
49% {
left: 48.99999618530273px;
}
44% {
left: 43.99999999999999px;
}
8% {
left: 7.999997615814209px;
}
5% {
left: 4.99999475479126px;
}
3% {
left: 3.0000030994415283px;
}
1% {
left: 1.000001072883606px;
}
}