Background Color Animation in CSS

This CSS code snippet helps you to create background color animation. It uses CSS keyframes with a sequence of colors that change over time. You can set the custom values for the color that you want to animate on your webpage.

How to Create Background Color Animation using CSS

In the first step, create a div element with a class name “container” and place your content inside it.

<div class="container">
  <span class="title">CSS background color animation</span>
</div>

Add the following CSS to style and animate the colors for the container. If you want to set the colored background for the whole page, simply define the CSS rules for the body element instead of the container.

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.title {
  margin: 0 auto;
  color: white; 
  font-family: 'Lato', sans-serif;
  font-size: 3rem;
}

.container {
  width: 100%;
  height: 100%;  
  display: flex;
  align-items: center;
  text-align: center;
  animation: changeBackgroundColor 7s infinite;
}

@keyframes changeBackgroundColor {
  0% {
    background-color: #001F3F;
  }
25%{    background-color: #43cea2;}

  50% {
    background-color: #FF4136;
  }
70%{
    background-color: #ffb347;}
  100% {
    background-color: #001F3F;
  }
}

That’s all! hopefully, you have successfully created color animation for the background. If you have any questions or suggestions, feel free to comment below.