Skip to content

Instantly share code, notes, and snippets.

@bsitruk
Created February 26, 2016 12:50
Show Gist options
  • Save bsitruk/aec6860ce8d1ab980098 to your computer and use it in GitHub Desktop.
Save bsitruk/aec6860ce8d1ab980098 to your computer and use it in GitHub Desktop.
SVG2CSS : output files
@keyframes dropball {
0% {
bottom: 200px;
}
2% {
bottom: 198.89046144485474px;
}
4% {
bottom: 197.5577425956726px;
}
6% {
bottom: 195.3596692085266px;
}
7% {
bottom: 192.5960192680359px;
}
9% {
bottom: 189.49127101898193px;
}
10% {
bottom: 186.1709690093994px;
}
11% {
bottom: 182.70591926574707px;
}
12% {
bottom: 179.13814735412598px;
}
13% {
bottom: 175.49418449401855px;
}
14% {
bottom: 171.79171752929688px;
}
15% {
bottom: 168.04300498962402px;
}
16% {
bottom: 160.43976974487305px;
}
17% {
bottom: 156.59682846069336px;
}
18% {
bottom: 152.7318572998047px;
}
19% {
bottom: 144.94751739501953px;
}
20% {
bottom: 141.03264236450195px;
}
21% {
bottom: 133.16590881347656px;
}
22% {
bottom: 129.2165756225586px;
}
23% {
bottom: 121.2911605834961px;
}
24% {
bottom: 113.33521270751953px;
}
25% {
bottom: 105.3537826538086px;
}
26% {
bottom: 97.35050964355469px;
}
27% {
bottom: 89.328369140625px;
}
28% {
bottom: 81.2899169921875px;
}
29% {
bottom: 73.23715209960938px;
}
30% {
bottom: 65.17164611816406px;
}
31% {
bottom: 57.09471130371094px;
}
32% {
bottom: 49.00764465332031px;
}
33% {
bottom: 36.85993957519531px;
}
34% {
bottom: 28.751373291015625px;
}
35% {
bottom: 16.575027465820312px;
}
36% {
bottom: 8.449356079101562px;
}
37% {
bottom: 5.6273956298828125px;
}
38% {
bottom: 9.474273681640625px;
}
39% {
bottom: 13.295852661132812px;
}
40% {
bottom: 17.087554931640625px;
}
41% {
bottom: 24.556503295898438px;
}
42% {
bottom: 28.216049194335938px;
}
43% {
bottom: 31.808395385742188px;
}
45% {
bottom: 35.3138427734375px;
}
46% {
bottom: 38.70347595214844px;
}
47% {
bottom: 41.93290710449219px;
}
48% {
bottom: 44.93080139160156px;
}
50% {
bottom: 47.578704833984375px;
}
52% {
bottom: 49.67784118652344px;
}
54% {
bottom: 50.92765808105469px;
}
56% {
bottom: 51.026947021484375px;
}
58% {
bottom: 49.938507080078125px;
}
60% {
bottom: 47.933502197265625px;
}
61% {
bottom: 45.32872009277344px;
}
63% {
bottom: 42.34429931640625px;
}
64% {
bottom: 39.11199951171875px;
}
65% {
bottom: 35.71031188964844px;
}
66% {
bottom: 32.18757629394531px;
}
67% {
bottom: 28.575515747070312px;
}
68% {
bottom: 24.89520263671875px;
}
69% {
bottom: 21.161895751953125px;
}
70% {
bottom: 17.3868408203125px;
}
71% {
bottom: 13.579330444335938px;
}
72% {
bottom: 5.90618896484375px;
}
73% {
bottom: 2.0910797119140625px;
}
74% {
bottom: 3.0439453125px;
}
75% {
bottom: 6.3134307861328125px;
}
77% {
bottom: 9.31329345703125px;
}
79% {
bottom: 11.872848510742188px;
}
80% {
bottom: 13.684036254882812px;
}
82% {
bottom: 14.308319091796875px;
}
84% {
bottom: 13.5106201171875px;
}
86% {
bottom: 11.5677490234375px;
}
88% {
bottom: 8.915969848632812px;
}
89% {
bottom: 5.852020263671875px;
}
90% {
bottom: 2.5506134033203125px;
}
92% {
bottom: 0.8137359619140625px;
}
93% {
bottom: 3.8302154541015625px;
}
95% {
bottom: 5.7218170166015625px;
}
97% {
bottom: 5.4010467529296875px;
}
99% {
bottom: 3.1641998291015625px;
}
}
/* Add Your CSS */
.ball {
left: 100px;
bottom: 100px;
height: 20px;
width: 20px;
background: white;
border-radius: 50%;
position: absolute;
animation: dropball 2s infinite;
}
<!-- Add Your HTML -->
<div class="ball"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment