Grow your CSS skills. Land your dream job.

CSS Transitions

  • # July 5, 2011 at 4:08 pm

    I’m trying something different with CSS Animations.

    Basically when the page loads, I want a 2 second delay before an element fades in. Currently I have it triggering when the user hovers over the body as below. But obviously, when the user moves the cursor out of the body, the logo disappears again..

    I don’t really know what I’m doing!


    body {
    background: #000;
    height: 100%;
    }
    body:hover #logo {
    opacity: 1;
    -webkit-transition: opacity 2s ease-in-out 1s;
    }

    #logo {
    opacity: 0;
    }

    # July 5, 2011 at 4:18 pm

    If it’s on page load, might as well roll out some jQuery I think.

    # July 5, 2011 at 4:22 pm

    Good point, was trying to do it all with CSS but doesn’t seem to be possible

    # July 5, 2011 at 4:44 pm

    I think you had a pretty good idea, and for the most part it would work – but that time when the user isn’t hovered over the body it could look weird.

    # July 5, 2011 at 4:56 pm

    If you really want to do it with CSS I would try CSS animations. It is supported by the stable versions of WebKit and Firefox so it is pretty safe to use (and if the browser doesn’t support nothing will happen).

    https://developer.mozilla.org/en/CSS/CSS_animations

    You could make the first few keyframes do nothing to create the delay.

    But, it might be easier to do it with just jQuery.

    # July 6, 2011 at 12:41 am

    I have the same effect on my site. The main content fades in, and it’s done using pure CSS. A delay is being incorporated, but not using the traditional animation-delay. I have added a few ‘delay’ stops in my animation frames. Obviously this doesn’t work in all browsers.

    # September 21, 2012 at 8:41 pm

    the transition should be in the default state not the hover

    body {
    background: #000;
    height: 100%;
    -webkit-transition: opacity 2s ease-in-out 1s;
    }

    body:hover #logo {
    opacity: 1;
    }

    #logo {
    opacity: 0;
    }

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

You must be logged in to reply to this topic.

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