Jump to content

Using CSS Animation to Spin Icon - Not Working

Recommended Posts

Site URL: https://www.bigkidbakesale.com/

Hi,

I have a code to make an icon spin on my website.  It seems to work when I go in to edit the site, but when I visit the url it doesn't work.  It also doesn't work on mobile.  Here is the code I am using:

{
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  0% {
    transform: translate(0,0px);
  }
  65% {
    transform: translate(0,26px);
  }
  100% {
    transform: translate(0,0px);
  }
}

 

What am I missing?

 

Thank you!!

Link to comment
10 hours ago, BlayneG87 said:

Here is the code I am using:

{
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  0% {
    transform: translate(0,0px);
  }
  65% {
    transform: translate(0,26px);
  }
  100% {
    transform: translate(0,0px);
  }
}

Try to use next code, just change "Your Block ID" to correct selector of Your icon.

Your Block ID {
  -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 weeks later...
On 1/2/2022 at 2:19 AM, BlayneG87 said:

@SquareRefresh Thanks so much, this seemed to do the trick.  I now have a spinning cookie.  🙂

Awesome!

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

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.