Help with animating SVG

Question

Hi

I am trying to animate this SVG graphic to make it spin and not sure why it's not working. I'm doing this in Wordpress using a theme but that shouldn't be a problem. I earlier got the graphic to rotate on hover (which I have since deleted), so I know that I am targeting the graphic correctly using ".circle".

<svg id="Layer_1" class="circle" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 158.5 158.5"><defs>

<style>
.cls-1 {
fill:pink;
}

.cls-2 {
fill:#fff200;}

.cls-3 { 
fill:#00aeef;}

.cls-4 {
fill:#00a651;
}
</style>

</defs><title>logo</title><path class="cls-1" d="M103.05,20.75A79.25,79.25,0,0,0,23.8,100c0,.5,0,1,0,1.5h79.21Z" transform="translate(-23.8 -20.75)"/><path class="cls-2" d="M182.26,101.5c0-.5,0-1,0-1.5a79.25,79.25,0,0,0-79.25-79.25V101.5Z" transform="translate(-23.8 -20.75)"/><path class="cls-3" d="M23.84,101.5a79.23,79.23,0,0,0,79.21,77.75V101.5Z" transform="translate(-23.8 -20.75)"/><path class="cls-4" d="M103.05,101.5v77.75a79.24,79.24,0,0,0,79.21-77.75Z" transform="translate(-23.8 -20.75)"/></svg>

.circle {
-webkit-animation: rotation 1800ms infinite linear;
-moz-animation: rotation 1800ms infinite linear;
-o-animation: rotation 1800ms infinite linear;
animation: rotation 1800ms infinite linear;
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
}

Thanks in advance

Answer 1 · 2017-11-24T15:20:22Z

November 24, 2017 3:20pm

The actual definition of "rotation" seems to be missing. Perhaps you had something like this before and accidentally deleted it:

@keyframes rotation {
  from { transform: rotate(0); }
  to   { transform: rotate(1turn); }
}

Welcome to the Treehouse Community

Looking to learn something new?

Holly Logan

Holly Logan

Help with animating SVG

1 Answer

Steven Parker

Steven Parker