Make logo rotate on page load and hover

[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