Jump to content

How do I achieve a 360 Infinite Rotating Circle Animation with css?

Recommended Posts

Hello to all! 

I am trying to achieve an infinite 360 rotating circle animation for a client website  (7.1)

To see exactly what i'm trying to achieve, look at this websites home page  https://www.alexcantone.com/ 

I've tried googling this but have had no luck!

Would the css required be something like the below?  Or not at all? 
 

#block-yui_3_17_2_1_1634295033920_10337 {animation: turn 15s linear infinite;
}


Any help or guidance would be greatly appreciated .... thank you in advance!

Ruby Rose 

Link to comment

Hey @Ruby-Rose try to add the next code:

#block-yui_3_17_2_1_1634295033920_10337 {
  -webkit-animation: spin 15s linear infinite;
  -moz-animation: spin 15s linear infinite;
  -o-animation: spin 15s linear infinite;
  animation: spin 15s linear infinite;
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

 

SquareRefresh, premium plugins & templates that have an elevated feel.

Plugins: Have your site stand out. 
Templates: Our templates are designed with versatility in mind.
Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins.

Link to comment
  • 2 years later...

To make it rotate counter clockwise you can use:

 

#block-yui_3_17_2_1_1712763199228_154297 {
  -webkit-animation: spin 15s linear infinite;
  -moz-animation: spin 15s linear infinite;
  -o-animation: spin 15s linear infinite;
  animation: spin 15s linear infinite;
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@-moz-keyframes spin {
  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@-o-keyframes spin {
  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

Edited by vireshwara
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.