Using CSS Animation to Spin Icon - Not Working

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!!

Hey @BlayneG87 which icon You want to spin?

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 Thanks so much, this seemed to do the trick.  I now have a spinning cookie.  🙂

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!