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