Forums

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.

TT_Mark

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

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.

BoringCode

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.

joshuanhibbert

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.

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

treehouse : what would you like to learn today?

Forums

CSS Transitions