CSS Transitions

[TT_Mark]

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;

}

[TheDoc]

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

[TheDoc]

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.

[ianp]

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;
}

[Author]

Posts