How To Create A Fade Animation Using Css

Animation is one of the most interesting features you can add to your website and there are many types of animation, the most common ones include moving animation and other types of animation .
In this article, we would be learning how to create a fade animation. using Css. a fade animation is one which either fades in or fade out. so we would use the few lines of code below to accomplish it.

Html

 <div class="animate"></div>

Css

.animate {
  width: 300px;
  height: 300px;
  background-color: #395103;
  border-radius: 10px;
  animation-name: fadeinou;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  /* short hand property */
  /* animation: fadeinou 6s linear forwards infinite; */
}
@keyframes fadeinou {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

When you add this animation code to your project, you will have a nice fade animation which fades in and out.

Result

it’s good to note that you are not limited to using only colors

In fact you can do animation with images as well, and we would explore an example on how to apply the same fade animation to an image.

Html

    <div class="animate">
      <img src="./images/download.jpg" alt="" /> 
    </div>
Please replace the image path with your own so that you can see the image

CSS
.animate {
  width: 300px;
  height: 300px;
  border-radius: 10px;
}
.animate img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 20px;
  animation-name: fadeinou;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  /* short hand property */
  /* animation: fadeinou 6s linear forwards infinite; */
}

you can see that the fade in and fade out animation was applied to the image.

Simple and straight forward. again.

You are not limited to just using the animation for contents on the webpage,

You can apply the animation to your background as well.

Using fade animation for your background

We will take another example on how we can apply the fade animation to our background image in Css.

The only problem is that the fade animation will be applied to every content on that webpage

html
    <div class="animate"></div>

CSS
.animate {
  width: 300px;
  height: 300px;
  background: url('/IMG_20190701_205015.jpg') center/cover;
  border-radius: 10px;
  animation-name: fadeinou;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  /* short hand property */
  /* animation: fadeinou 6s linear forwards infinite; */
}
@keyframes fadeinou {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

For your code to work perfectly, ensure that you include the right path for your image.

if the image is not linked properly, you may have some bug.

hopefully you understand how you can create and use a fade in and fade out animation on your website.