Skip to content Skip to sidebar Skip to footer

Crossfade Two Images Repeatedly After Showing For 10 Seconds

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>

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