2015-12-30 16:51:43 -08:00
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
|
2016-01-07 18:19:45 -08:00
|
|
|
<style type="text/css" >
|
|
|
|
|
<![CDATA[
|
|
|
|
|
@keyframes coloredBounce {
|
|
|
|
|
0% {
|
|
|
|
|
fill: #430a39;
|
|
|
|
|
transform: translate(0, -20px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
20% {
|
|
|
|
|
fill: #bc1550;
|
|
|
|
|
transform: translate(19px, -6px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
40% {
|
|
|
|
|
fill: #e87f02;
|
|
|
|
|
transform: translate(12px, 16px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
60% {
|
|
|
|
|
fill: #f5c700;
|
|
|
|
|
transform: translate(-12px, 16px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
80% {
|
|
|
|
|
fill: #88990f;
|
|
|
|
|
transform: translate(-19px, -6px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
100% {
|
|
|
|
|
fill: #430a39;
|
|
|
|
|
transform: translate(0, -20px);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
circle {
|
|
|
|
|
animation: coloredBounce 5s linear infinite;
|
|
|
|
|
}
|
|
|
|
|
]]>
|
|
|
|
|
</style>
|
|
|
|
|
<circle r="5" cx="50" cy="50"></circle>
|
|
|
|
|
<circle r="5" cx="50" cy="50" style="animation-delay: -1s"></circle>
|
|
|
|
|
<circle r="5" cx="50" cy="50" style="animation-delay: -2s"></circle>
|
|
|
|
|
<circle r="5" cx="50" cy="50" style="animation-delay: -3s"></circle>
|
|
|
|
|
<circle r="5" cx="50" cy="50" style="animation-delay: -4s"></circle>
|
|
|
|
|
</svg>
|
