Make logo rotate on page load and hover

[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