Animated Background with CSS and Html only

What is animated background on a website

Animated backgrounds are used to add a more dynamic feel to your website. It’s like having a slideshow of images in the background that keep changing every so often, but without any special software or plugins installed on your site. The great thing about this technique is it doesn’t cost you anything extra to have animated backgrounds and they don’t take up too much space either. You can still use other types of media, such as videos or images, with these techniques if you want!

Why use CSS and HTML to make a background animation?

You can use CSS and HTML to make a background animation without any other plugins.

Some of the benefits of this technique are: It doesn’t cost you anything extra, it only takes up one line in your code, and it is cross-browser compatible. The main downside to using these techniques for an animated background is that they don’t animate on hover (they will be static). In order to solve this problem, we have created another tutorial where you can create an animated rotation with CSS transitions. This means the image would change whenever you clicked over it! To see our work visit our website or read the blog post titled “How To Create Animated Rotation With CSS Transitions – And Why You Should”.

How to Create Animated background with CSS and HTML Only

In this post, we will be going through how to create animated backgrounds with CSS and HTML only. The first step is creating a simple rectangle that will act as the background of our animation. In order to do that, we need to define an element using the following selector: background-color in hexadecimal form (e.g., #000000 for black)

The next thing we want to do is add width and height values into these properties so it stays within place when scrolling vertically or horizontally on your screen. We can also set different dimensions depending on whether you are looking at it from a mobile device like iPhone XS Max or iPad Pro 11″ vs viewing it from laptop/desktop screens etc., but the general rule is that the dimensions should be no more than 1200px wide for mobile and 1920px for desktop.

Next up, we want to define a gradient by specifying two different colors in hexadecimal color codes (e.g., #000000 and #FFFFFF). These are called background-image, which will create an illusion of depth with the gradients stacking on top of each other as you scroll vertically or horizontally depending on what kind of screen size you’re viewing this background from. Remember too, it’s important not to add any text since CSS Animations don’t work when there are HTML Elements such as links that contain text within them; so make sure your images have titles if they need names!

Here is the complete code of animated background.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;box-sizing: border-box;}
        .container{width: 100%;height: 100%;position: absolute;overflow: hidden; background: linear-gradient(90deg, #0B486B, #F56217); display: flex; align-items: center;justify-content: center; }
        h1{padding: 10px;background: #ffffff; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}
        .container div{position: absolute;width: 0; height: 0;background: transparent; border: 20px solid transparent;top: 0;left: 0; border-bottom-color: #ffffff        ;}
        .container div:nth-child(2){top: 12%; left: 42%; animation: animate 10s linear infinite;}
        .container div:nth-child(3){top: 70%; left: 50%; animation: animate 7s linear infinite;}
        .container div:nth-child(4){top: 67%; left: 60%; animation: animate 10s linear infinite;}
        .container div:nth-child(5){top: 80%; left: 60%; animation: animate 12s linear infinite;}
        .container div:nth-child(6){top: 60%; left: 80%; animation: animate 15s linear infinite;}
        .container div:nth-child(7){top: 32%; left: 25%; animation: animate 16s linear infinite;}
        .container div:nth-child(8){top: 90%; left: 25%; animation: animate 9s linear infinite;}
        .container div:nth-child(9){top: 20%; left: 80%; animation: animate 5s linear infinite;}
        .container div:nth-child(10){top: 10%; left: 20%; animation: animate 6s linear infinite;}
        .container div:nth-child(11){top: 50%; left: 10%; animation: animate 8s linear infinite;}
        
        @keyframes animate {
            0%{transform: scale(0) translateY(0) rotate(0) ; opacity: 1;}
            100%{transform: scale(1.3) translateY(-90px) rotate(360deg) ; opacity: 0;}
        }

    </style>
</head>
<body>
    <div class="container">
        <h1>Animated Background</h1>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
</body>
</html>

First, we will take a div. Will set the class container of that div. This Div will be the parent Div which will hold all the children Div. Now we will set the position absolute to this div. Apart from this, we will set the display flex of this div so that we will set all the divs of the text inside it in the middle. Apart from this, we will also give it a gradient so that our background looks attractive. Now we will set the align-items center and content justify inside this container div so that our heading is in the middle.

Now we will take some divs which we have to animate. I have taken these 10 divs. You can take any number according to you. We will reduce the height and width of all those divs so that we can make their triangle. Because our animation is for that triangle. If you want, you can make anything according to yourself. You can make rectangles, squares, circles whatever you want to make. Now all these divs you have to set different parts at any part of the screen. As shown in the image below. For this, you can use Nth-Child.

Now we will set the animation in it. To set the animation, we will use the animation property. After setting the animation property we will give different timings to the sub div so that our animation starts and ends at different times. Now we will apply the animation using the keyframe selector. In which we will use the transform property. And will use transform, rotate and scale properties in it. Now in the second frame, we will set their value so that when the animation starts, the sub div will look different.

Animated background
Your output will look like this

If you’re interested in learning how to animate websites, check out some of the previous articles we’ve written on how to use CSS and HTML animations with ease!

We hope that by reading through this article you were able to learn about Animated backgrounds and see just how easy it is for anyone who knows their way around Photoshop or Giffy. If not, please feel free to reach us if you have any questions or comments concerning what was talked about in this post! Thank you so much for reading all the way down here- have a great day!

Leave a Comment