Animation delay on page load - css

Question

I am trying to create a delay for an image to load. I have the following, but I really want it to delay loading for 10 seconds, not just fade in. How can I modify this to get a delay before loading?
.image {
animation: fadeinLoad 10s;
}
#keyframes fadeinLoad {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<img class="image" src="https://i.stack.imgur.com/od9bJ.png" />

Answer 1

We need to give the .image class opacity: 0 so it loads hidden. Then, delay the animation:
animation: fadeinLoad 1s 5s forwards;
The second time of 5s specifies a wait to activate time of 5 seconds. The forwards property pauses the animation at 100%.
The shorthand above is the same as this:
animation-name: fadeinLoad;
animation-duration: 1s;
animation-delay: 5s;
animation-fill-mode: forwards;
Read more on CSS animation over on the MDN.
Example
Count to five :)
.image {
animation: fadeinLoad 1s 5s forwards;
opacity: 0;
}
#keyframes fadeinLoad {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<h1>Count to 5!</h1>
<img class="image" src="https://i.stack.imgur.com/od9bJ.png" />

Answer 2

You can do this much simpler than keyframe animations.
Change your code to something like this:
#topHeader .image {
transition-delay: 10s;
transition: opacity 1s;
opacity: 0;
}
#topHeader .image.YOUR-FIRING-CLASSNAME-HERE {
opacity: 1;
}
Plus, the days of needing to prefix every CSS3 property are pretty much over. You don't need -o-, -ms-, etc. etc.
Save for keyframes, as those apparently don't have large-scale standardized support just yet.