<svg width="900" height="700">
  <ellipse cx="350" cy="150" rx= "250" ry="125" stroke="crimson" stroke-width="5px" fill="gold" id="my-ellipse">
</svg>
#my-ellipse{
  animation-name: transformer;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
  


@keyframes transformer{
  0%{
    transform: skew(15deg, 25deg) rotate(30deg);
  }
  
  15%{
    transform: translate(30px, 20px) skew( 35deg, 25deg);
  }
  30%{
    transform: rotate(270deg) skew(-15deg,  15deg);
  }
  60%{
    transform: scale(0.5, 0.7) rotate(350deg);
  }
  100%{
    transform: translate(50px, 70px) scale(1.5, 2.0) skew(5deg, 10deg) rotate(150deg);
  }
 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.