- This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
Viewing 8 posts - 1 through 8 (of 8 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Just wondering if there’s a way, using CSS/HTML only, to have a transition take place without a trigger event such as hover. For example, have the site logo start off in grayscale then transition to color after the page loads.
Don’t place it in the hover just put the animation in the regular style
.foo {
animation: theAnimation 2s linear;
}
.foo:hover {
/* not here */
}
There sure is: http://jsfiddle.net/Paulie_D/YMDqd/
I think snillor was talking about “transition” , but why the answers were talking about “animation”
I appreciate the quick responses, EkingRDL and Paulie_D.
As Phil_Lu noted, however, I’m asking about transitions.
@Snillor CSS animations are self-invoking transitions, with extra capabilities. The answer is yes, but you have to be willing to use ‘animations’ and not ‘transitions’.
Think of the definition of the word ‘transition’. It reflects a change between two states. With the way CSS is set up, a single selector cannot have two independent states, that’s what pseudo-classes are for.
Thanks for the clarification Joshua.
Just noticed this this thread on transitions and page load – Transitions Only After Page Load. In it, Chris said:
“It would be nice to be able to prevent or trigger animations/transitions on page load without JavaScript, but alas.”
Thanks for the suggestion, Schmotty. If I decide to use animations I’ll give it a try.
Since my original question about auto-starting transitions seems to have been answered, I’ll mark this closed.