CSS opacity change on div with time delay not user interaction

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