Background rainbow animation not working why?

Question

.rainbow {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  animation: change 10s ease-in-out infinite;
}

@keyframes change {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

If i add the rainbow class to div container the rainbow is not working why!?

Answer 1

It's not working, since background-position will work with background image but not with color.

Js fiddle->https://jsfiddle.net/MahuaSarkar/dxLsoqp0/

Try this:

<div class="rainbow ">
    <div>
    Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
    </div>
</div>

<style>
.rainbow {
  background-image: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  animation: change 1s ease-in-out infinite;
  
}
@keyframes change {
  0% {
    background: linear-gradient(-45deg, #23d5ab, #ee7752, #e73c7e, #23a6d5);
  }
  50% {
    background: linear-gradient(-45deg, #23a6d5, #23d5ab, #ee7752, #e73c7e);
  }
  100% {
    background: linear-gradient(-45deg, #e73c7e, #23a6d5, #23d5ab, #ee7752);
  }
}
</style>

Hope that helps!!