CSS animation slider - Fade in, fade out

by Ayyappan Sakthivadivel

HTML

<div class="ig-fadeinout">
     <div>
      <h1>This is slide 1</h1>

      <p>Slide 1

      </p><p>It has a <a href="./">link.</a>
     </p></div>

     <div>
      <h1>This is the second slide</h1>

      <p>Second slide
     </p></div>

     <div>
      <h1>This is slide number 3</h1>

      <p>Slide number 3
     </p></div>
    </div>

CSS

.ig-fadeinout > * {
    animation: 12s fadeinout infinite linear;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.0;
}

@keyframes fadeinout {
  0% {opacity: 0.0}
  4% {opacity: 1.0}
  33.33% {opacity: 1.0}
  37.33% {opacity: 0.0}
  100% {opacity: 0.0}
  }

.ig-fadeinout > *:nth-child(1) {animation-delay: 0s}
.ig-fadeinout > *:nth-child(2) {animation-delay: 4s}
.ig-fadeinout > *:nth-child(3) {animation-delay: 8s}