Crossfade Between Two Images with CSS Animations

A website I worked on wanted an animated, flashing neon sign. A gif is the first thing that comes to mind in such a situation, but unfortunately gifs do not allow partial transparency, and I needed to place this image on a textured background. The solution was to use CSS animations to alternate between two pngs.

I used a modified method from this guide by Rick Bradshaw.

View demo

Put the two images in an outer block element.

<section>
  <img class="bottom" src="img.png" />
  <img class="top" src="img-2.png" />
</section>

The outer will be relative and the inner will be absolute.

section {
  position: relative;
}

section img {
  position: absolute;
}

Create the animation and apply it to the top element.

.top {
  animation-name: fade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-direction: alternate;
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}