Tania Rascia

Skip Navigation
Crossfade Between Two Images with CSS Animations

Crossfade Between Two Images with CSS Animations

 /  8 responses

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.

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

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;


Get updated when I create new content.
Unsubscribe whenever. Never any spam.


I'm Tania. I turn down every ad, affiliate, and sponsor request I get. I write free resources that help thousands of people successfully become devs. If you enjoy my content, please consider supporting what I do.

Support my work

Write a response

Your email address will not be published. Required fields are marked *

All code will be displayed literally.