Skip to content Skip to sidebar Skip to footer
Home / Animation / Css / Html

Crossfade Two Images Repeatedly After Showing For 10 Seconds

Post a Comment
I'm trying to use HTML and CSS to crossfade two images after showing them for 10 seconds each. I want this to repeat constantly. Here is my HTML:
<

Solution 1:

Here is an example with 10s delay and 1s animation duration.

#container {
  float: right;
  height: 246px;
  position: relative;
  width: 230px;
}
#container img {
  height: 246px;
  width: 230px;
  left: 0;
  opacity: 0;
  position: absolute;
}
#container img.bottom {
  opacity: 1;
}
#container img.top {
  -webkit-animation: crossFade 11s infinite;
  animation: crossFade 11s infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

@-webkit-keyframes crossFade {
  0% {
    opacity: 0;
  }
  47.62% {
    opacity: 0;
  }
  52.38% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes crossFade {
  0% {
    opacity: 0;
  }
  47.62% {
    opacity: 0;
  }
  52.38% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
<div id="container">
  <img class="bottom" src="https://dummyimage.com/200x200/404/fff">
  <img class="top" src="https://dummyimage.com/200x200/101/fff">
</div>

You may like these posts

Post a Comment for "Crossfade Two Images Repeatedly After Showing For 10 Seconds"