How to Create Animated Background using CSS

How to Create Animated Background using CSS

Animated Background using CSS

We see many kinds of background animations on the homepage of the website. If you want to create that kind of animated background using CSS then this tutorial is for you.

Here I have created a simple CSS Animated Background. Hover color animation can be seen by moving the mouse over it. I have used an image at the top of the web page here. However, under normal circumstances, the image can not be seen. 

Because a background color has been used on the image. When you hover the mouse over that background, you can see the image in the background. In fact, the image of the place where you will be located. However, this Animated Background has been made very interesting.

Create animated background in HTML CSS

If you have difficulty understanding what I mean, check out the preview below. Here you will find live previews.

See the Pen
Untitled by Shantanu Jana (@shantanu-jana)
on CodePen.

Here I have shown step by step how background animation CSS has been created. Use the button below if you want the source code.

Step 1: Basic structure of animated background

Some basic structure of this background animation has been created using the following code. Here the background of the webpage has been designed and the background color has been added.

<div class=”container”></div>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: azure;
cursor: grabbing;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
flex-wrap: wrap;
overflow: hidden;
}

This span element is created by JavaScript. This is basically the place where the background image can be seen.

.container span {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 20px;
min-width: 20px;
}

Step 2: Add an image to the background

An image has been added to the background using ‘before’. Here opacity: 0 is used so the image cannot be seen.

.container span::before {
content: “”;
position: absolute;
background: url(https://images.pexels.com/photos/4101555/pexels-photo-4101555.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500);
background-position: center;
background-attachment: fixed;
background-size: cover;
transition: 10s;
opacity: 0;
pointer-events: none;
width: 100%;
height: 100%;
}

Opacity: 1 used using hover. As a result, the image can be seen where your mouse is.

.container span:hover:before {
transition: 0s;
opacity: 1;
width: 1000%;
height: 1000%;
}

Step 3: Activate Background Animation

Now, this Animated Background has been activated by JavaScript. Only 2 lines of JavaScript have been used here.

for (let i = 1; i < 2000; i++) {
  const shape = document.createElement(“span”);
  document.querySelector(“.container”).appendChild(shape);
}

Hopefully, you can create CSS Animated Background using the code above. If there is any problem then use the download button below. Please comment on how you like this background animation CSS.