Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
478 views
in Technique[技术] by (71.8m points)

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

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!

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...