Forums

snillor

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.

EkingRDL

Don't place it in the hover just put the animation in the regular style

.foo {
    animation: theAnimation 2s linear;
}
.foo:hover {
    /* not here */
}

Paulie_D

There sure is: http://jsfiddle.net/Paulie_D/YMDqd/

Phil_Lu

I think snillor was talking about "transition" , but why the answers were talking about "animation"

snillor

I appreciate the quick responses, EkingRDL and Paulie_D.

As Phil_Lu noted, however, I'm asking about transitions.

joshuanhibbert

@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.

snillor

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."

Schmotty

You could set the animation and the transition to be the same, and then it would appear to be automatic.

The animation fires on page load, and the transition on the hover.

snillor

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.

treehouse : what would you like to learn today?

Forums

[Solved] transitions -- is there a way to auto-start?