How to Use CSS to Fade In and Fade Out HTML Text and Pictures

Believe it or not, this image of an adorable dog is fading in and out with only CSS and HTML (and then screen captured to put in this article). I’ll explain how.

If you have ever used video editing software — whether it’s Windows Movie Maker or Adobe Premiere Pro — then you are most likely familiar with the fade-in and fade-out video transitions. They’re extremely effective for creating a nice and polished feel, and there’s no reason why you shouldn’t be able to have that in your arsenal when you’re programming web applications.

Fading In

This cat staring into the distance looks much more epic when you incorporate a CSS fade-in effect.

In order to fade your image from transparent to full opacity, first paste the following code into your CSS block.

.fade-in {
  animation: fadeIn ease 10s;
  -webkit-animation: fadeIn ease 10s;
  -moz-animation: fadeIn ease 10s;
  -o-animation: fadeIn ease 10s;
  -ms-animation: fadeIn ease 10s;
}
@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
}