<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.