<svg width="300" height="300">
<ellipse id="myCircleShadow" cx="50%" cy="90%" rx="10%" ry="5%" fill="gray" />
<ellipse id="myCircle" cx="50%" cy="20%" rx="20%" ry="20%" fill="blue" />
</svg>
@keyframes bounce {
to {
cy: 70%;
rx: 30%;
}
}
#myCircle {
animation: 1s cubic-bezier(.8,-.5,.2,1.4) infinite alternate bounce;
}
@keyframes shadow {
to {
opacity: 1;
rx: 30%;
}
}
#myCircleShadow {
opacity: 0.5;
animation: 1s cubic-bezier(.8,-.5,.2,1.4) infinite alternate shadow;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.