[Solved] How do I make two images fade in/out repeatedly? [closed]

by


CSS Animation

  • Wrap both images in a block element that has: position:relative

  • Set both images to position:absolute

  • Make 2 @keyframes and animation: 10s infinite alternate

  • Assign a @keyframe animation to each image.

  • The 2 properties being animated is opacity and z-index (z-index is only on 2 frames because there’s only 2 states really lower or higher than another positioned element).

Demo

#promo {
  margin-top: 33px;
  position: relative;
}

img {
  width: 320px;
  height: 267px;
  position: absolute;
}

.A {
animation: animA 10s infinite alternate;
}

.B {
animation: animB 10s infinite alternate;
}

@keyframes animA {
  0%, 25% {
    opacity: 0;
    z-index: 0;
  }
  50% {
    opacity: .5;
  }
  
  100% {
    opacity: 1;
    z-index: 1
  }
}

@keyframes animB {
  0%,25% {
    opacity: 1;
    z-index: 1;
  }
  50% {
    opacity: .5;
  }
 100% {
    opacity: 0;
    z-index: 0
  }
}
<figure id="promo">
  <img src="https://pockey.io/assets/promo_xmas.png" class="B">




  <img src="https://pockey.io/assets/howtoplay.gif" class="A">
</figure>

4

solved How do I make two images fade in/out repeatedly? [closed]