CSS opacity change on div with time delay not user interaction - css

Question

I'm trying to set up an image within a div that will slowly appear (opacity from 0 to 1) over 5 seconds. I have this code:
.fadeDivIn {
opacity: 1;
transition: opacity 5s ease-in;
-moz-transition: opacity 5s ease-in;
-webkit-transition: opacity 5s ease-in;
-o-transition: opacity 5s ease-in;
}
but I can't figure out how to trigger it automatically.
I've been doing transitions to other elements with CSS3 keyframes and would ideally like to apply something similar to opacity but have hit a brick wall. Can anyone help please?

Answer 1

Have a look at the following example , you need to use keyframes
div {
background: #333;
width: 200px;
height: 200px;
-webkit-animation: smooth 5s ease-in;
-moz-animation: smooth 5s ease-in;
-o-animation: smooth 5s ease-in;
-ms-animation: smooth 5s ease-in;
animation: smooth 5s ease-in;
}
#-webkit-keyframes smooth {
0% { opacity: 0;}
100% { opacity: 1;}
}
An example : http://jsfiddle.net/zxx8u/1/

Answer 2

http://jsfiddle.net/DerekL/9PfMF/
div{
-webkit-animation: fadein 5s linear 1 normal forwards;
}
#-webkit-keyframes fadein{
from { opacity: 0; }
to { opacity: 1; }
}

Answer 3

You can use jQuery animate instead, very clean and easy to manipulate.
JSFiddle link
<div style="opacity:0;">some text</div>
$("div").animate({opacity: '1'}, 5000);

Answer 4

Something like that works for me:
.chat-messages li{
-webkit-animation: fadein 5s linear 1 normal forwards;
}
#-webkit-keyframes fadein{
0% { opacity: 1;}
90% { opacity: 1;}
100% { opacity: 0;}
}

Answer 5

You can do with simple css3 keyframe animation
demo
<div class="timedelay"></div>
.timedelay {
width: 30px;
height: 30px;
position: absolute;
background-color: red;
-webkit-animation: myanim 5s ease 5s;
}
#-webkit-keyframes myanim {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}