@keyframes SVG Aminations

This is an example of a looping animation of a rotating and scaling circular svg. The animation will alternate between playing forwards and backwards. For the animation to work, you will need to give id #rotation to the svg.


<style>
#rotation {animation: alternate-rotation 5s alternate linear infinite; transform-origin: 50%;
transform-origin: 50%;}
@keyframes alternate-rotation{
 from{
    transform: rotate(0deg) scale(.7);
  }

  to {
    transform: rotate(-360deg) scale(1);
  }
}
</style>