Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS transitions — is there a way to auto-start?

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #38166
    snillor
    Member

    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.

    #103247
    EkingRDL
    Member

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

    .foo {
    animation: theAnimation 2s linear;
    }
    .foo:hover {
    /* not here */
    }
    #103249
    Paulie_D
    Member
    #103250
    Phil_Lu
    Member

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

    #103252
    snillor
    Member

    I appreciate the quick responses, EkingRDL and Paulie_D.

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

    #103253

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

    #103256
    snillor
    Member

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

    #103345
    snillor
    Member

    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 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.