javascript - How do I make an image repeatedly show and hide every x seconds?

Question

I have an image that I want to show for 10 seconds and then hide for 10 seconds and then show for 10 seconds and hide for 10 seconds and do that process repeatedly forever, but I don't know how... I needs to be done using either JavaScript, CSS3 or HTML5!

HTML for the Image:

<div id="promo" class="gif" style="margin-top:33px;">
     <img width="320" height="267" src="assets/promo_xmas.png">
</div>

and I want this to just show for 10 seconds and hide for 10 seconds

Who ever answers this question can you please put an x for the amount of Seconds? thanks!

Answer 1

I'm surprised no one gave a CSS-only answer yet, so here is one.

img {
  opacity: 0;
  animation: disappear 10s linear 0s infinite alternate;
}

/* The animation code */
@keyframes disappear {
    from {opacity: 0;}
    to {opacity: 1;}
}