Grow your CSS skills. Land your dream job.

transitions — is there a way to auto-start?

  • # May 22, 2012 at 6:29 am

    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.

    # May 22, 2012 at 6:36 am

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

    .foo {
    animation: theAnimation 2s linear;
    }
    .foo:hover {
    /* not here */
    }
    # May 22, 2012 at 6:40 am

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

    # May 22, 2012 at 8:02 am

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

    # May 22, 2012 at 9:00 am

    I appreciate the quick responses, EkingRDL and Paulie_D.

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

    # May 22, 2012 at 9:56 am

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

    # May 22, 2012 at 10:11 am

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

    # May 22, 2012 at 5:53 pm

    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.

    # May 23, 2012 at 2:37 pm

    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.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".