@DownPW thanks. I forgot about that.
Make logo rotate on page load and hover
-
@DownPW I don’t. If I press F5 to reload the tags page, there is no animation?
-
@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
-
@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; }
-
I already tried.this
If I add this code, work at loading page works but the mouse over doesn’t work anymore
-
@DownPW Can you put it back so I can test?
-
@phenomlab done
-
@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; }
-
@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
-
@DownPW Can you give me admin access to your site please (PM me)
-
@DownPW Should work now, yes?
The issue is that you are declaring the same
keyframe
state twiceAll 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
onhover
-
-
Did this solution help you?
-
-
Profil Photos
Solved Customisation -
-
-
Custom badges
Solved Customisation -
hover link effect
Solved Customisation -
-