Make logo rotate on page load and hover

[DownPW]

@DownPW said in fading in /tags page:

Because I have the effect but just at the refresh page and not on Mouse over

How to have this effect when reloading the page and the mouse over at the same time.

So far I can only get one or the other…

For resume my css code :

@keyframes rotate180 {
        from {
          transform: rotate(0deg);
        }
       
        to {
          transform: rotate(180deg);
        }
      }
       
      @keyframes rotate0 {
        from {
          transform: rotate(180deg);
        }
       
        to {
          transform: rotate(0deg);
        }
      }
      
.header .forum-logo:hover {
    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;
}

[phenomlab]

@DownPW Should work now, yes?

The issue is that you are declaring the same keyframe state twice

All you should use is the below

.header .forum-logo {
    float: left;
    max-height: 50px;
    height: 50px;
    width: auto;
    max-width: 150px;
    display: inline-block;
    margin-left: 0px;
    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;
}

.forum-logo:hover {
    transform: rotate(180deg);
}

Basically, you only need the transform on hover

[phenomlab]

@DownPW Why would you reload and mouse over at the same time ?

[DownPW]

@phenomlab said in fading in /tags page:

Why would you reload and mouse over at the same time ?

When I say at the same time it is that I expressed myself badly.

Just have both effects and not one or the other

[phenomlab]

@DownPW Is in DEV or PROD ?

[DownPW]

@phenomlab

Prod actually

[phenomlab]

@DownPW Ok, but can you explain the desired result - do you want the hover effect to happen on page load for example as well as on hover?

[DownPW]

@phenomlab

exactly

effect to happen on page load and on hover.
Same effect

[phenomlab]

@DownPW For page load you will likely need a trigger created by jQuery. Whilst it’s feasible to execute animation via transform in CSS on page load, the CSS is probably being loaded after the page, meaning it won’t fire.

You could test this on a standard page with the CSS inline to see if that works first before you explore the other route.

[DownPW]

@phenomlab

odd you hav this 2 effect here…

[phenomlab]

@DownPW I don’t. If I press F5 to reload the tags page, there is no animation?

[phenomlab]

@phenomlab @DownPW wait - I see what you mean now - you’re talking about the rotating logo - the title of this post threw me, so I’ll split this to a new topic to avoid confusion

[phenomlab]

@DownPW Add this to your CSS

.header .forum-logo {
    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;
}

[DownPW]

@phenomlab

I already tried.this

If I add this code, work at loading page works but the mouse over doesn’t work anymore

[phenomlab]

@DownPW Can you put it back so I can test?

[DownPW]

@phenomlab done

[phenomlab]

@DownPW I see the issue. Try

.header a.forum-logo:hover {
    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;
}

[DownPW]

@phenomlab said in Make logo rotate on page load and hover:

.header a.forum-logo:hover {
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;
}

not working

[phenomlab]

@DownPW Can you give me admin access to your site please (PM me)

[phenomlab]

@DownPW Should work now, yes?

The issue is that you are declaring the same keyframe state twice

All you should use is the below

.header .forum-logo {
    float: left;
    max-height: 50px;
    height: 50px;
    width: auto;
    max-width: 150px;
    display: inline-block;
    margin-left: 0px;
    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;
}

.forum-logo:hover {
    transform: rotate(180deg);
}

Basically, you only need the transform on hover

[DownPW]

@phenomlab

grrrrrrr

that simple…

Thanks Mark