• Post category:CSS

How to Make CSS Animate Background Color

CSS Animate Background Color

In this article, we will see how to make animate background color in CSS. We can animate all the colors in the background, Let’s see how to do it step-by-step.

How to make animation bg-color

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Datepicker</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
h1{
border: 3px solid white;
width: 300px;
display: flex;
align-content: center;
justify-content: center;

padding: 5px;
}
section{
width: 100%;
height:100vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #2305AB);
background-size: 400% 400%;
position: relative;
animation: change 10s ease-in-out infinite;
}
@keyframes change{
0%{
background-position: 0 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0 50%;
}
}
</style>
</head>
<body>
<section>
<h1>Background color Animation</h1>
</section>
</div>
</body>
</html>

Live Preview:

See the Pen
CSS Animate Background Color by Wonderdevelop (@wonderdevelop)
on CodePen.

 

  1. We have written the general structure of HTML.
    In the body, we have <h1> tag with some text inside the <section>.
  2. To create animate bg-color, you need to select the tag for which you want to create animate bg-color.
  3. Then we set any gradient color with degree using “background” or “background-color” property as in the above code. Ex : background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #2305AB)
  4. Then add animation property and you should give 4 value like “name”, “duration”, “timing-function”, and “iteration-count”. For ex: animation: change 10s ease-in-out infinite; Here, “change” is animation name, “10s” is duration, “ease-in-out” is a function and “infinite” is iteration-count. You can give your desired values.
  5. And finally, we create keyframes for animating the background color. We set 0% keyframe to background-position: 0 50%, 50% keyframe to background-position: 100% 50%, and 100% keyframe to background-position: 0 50%.
  6. See the above live preview, the linear gradient background-color is animated infinitely.

Leave a Reply