No problem dude !
I hope you have a good vacation. Enjoy your loved ones!
@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;
}
@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 Why would you reload and mouse over at the same time ?
@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
@DownPW Is in DEV or PROD ?
Prod actually
@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 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.
odd you hav this 2 effect here…
@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 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