CSS3 - Fade In effect

Question

i'm trying to create a fade in on a div using CSS3.

I can get the div to fade in, however, i can't seem to get the div to be not visible before the fade in effect.

I eventually want to do this with multiple div's in my page.

I've created a simple fiddle of what I've got so far http://jsfiddle.net/dan_gribble/Aq4nK/

HTML is:

<div id="test">
</div>

CSS is:

#test {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid black;
    background-color: red;

    -webkit-animation: fadein_screen_01 2s;  -webkit-animation-delay:  2s;
    -moz-animation:    fadein_screen_01 2s;  -moz-animation-delay:     2s; 
    -ms-animation:     fadein_screen_01 2s;  -ms-animation-delay:      2s;
    -o-animation:      fadein_screen_01 2s;  -o-animation-delay:       2s;
    animation:         fadein_screen_01 2s;  animation-delay:          2s;
}

@-webkit-keyframes fadein_screen_01 {0% {opacity: 0;} 100% {opacity: 1;}} 
@-moz-keyframes fadein_screen_01 {0% {opacity: 0;} 100% {opacity: 1;}} 
@-ms-keyframes fadein_screen_01 {0% {opacity: 0;} 100% {opacity: 1;}}
@-o-keyframes fadein_screen_01 {0% {opacity: 0;} 100% {opacity: 1;}} 
@keyframes fadein_screen_01 {0% {opacity: 0;} 100% {opacity: 1;}}

Any help would be greatly appreciated.

Answer 1

You could achieve this with a bit of scripting.

CSS

    
#targetElement { 
    background-color:#000;
    opacity: 0; 
    transition: 1s; 
}
#targetElement.opaque { opacity:1; transition:1s; }

HTML

    <p id="targetElement">Lorem</p>

jQuery

$('#targetElement').addClass('opaque');

You element is set by default to opacity:0. At page load, you assign it a class that gives it opacity:1, and whose transition is set to taste. You could do this with all elements, or with an element that contains or covers your others.

http://jsfiddle.net/mqxz8/

Answer 2

Thanks for your help guys but I've got it working as I needed using CSS3.

All I needed to do was add the following CSS to my #test ID after animation: settings.

-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards; 
-o-animation-fill-mode:forwards; 
-ms-animation-fill-mode:forwards; 
animation-fill-mode:forwards; 

Updated JSFiddle http://jsfiddle.net/Aq4nK/4/