Rotating homepage icons, gifs?

[Panda]

On this page, I like the way the coloured Sudonix wheel rotates when you click on it !
Is this a gif file?
In my nodebb forum can I just upload a gif into the settings for forum logo to get a similar effect?

[phenomlab]

@eveh It’s not a GIF, no. It’s actually a webp file so made much smaller, and uses keyframes to control the rotation on hover. You can easily make your own though

The CSS for that is as below

    @keyframes rotate180 {
        from {
          transform: rotate(0deg);
        }
       
        to {
          transform: rotate(180deg);
        }
      }
       
      @keyframes rotate0 {
        from {
          transform: rotate(180deg);
        }
       
        to {
          transform: rotate(0deg);
        }
      }

Your milage may vary on the CSS below, as it’s custom for Sudonix, but this is the class that is used to control the rotate

.header .forum-logo,
img.forum-logo.head {
    max-height: 50px;
    width: auto;
    height: 30px;
    margin-top: 9px;
    max-width: 150px;
    min-width: 32px;
    display: inline-block;
    animation-name: rotate180, rotate0;
    animation-duration: 1000ms;
    animation-delay: 0s, 1000ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    transition: transform 1000ms ease-in-out;
}