Animated Background with Pure CSS and Html

A simple website with some essential pieces of information sometimes makes the visitor bored. To increase the visual aesthetics of any website, developers are nowadays turning to animation. The background animation is one of the parts of that process.  In most cases, aesthetically used animated backgrounds may increase the visual interest of a particular website. In this project, we will create a great background animation of cubes with the help of CSS keyframes animation.

For this project of background animation, we will use plain HTML and CSS. We will create a nice Background animation where square looking boxes will appear from the bottom of the banner area, increase in size, and disappear after going on top. I used a gradient background for the banner area, but you can use any background image here if you want.

Let's start with HTML markup for this project. The markup is very plain and straightforward. We first take a div element with the 'box' class, which will act as the container of the cubes we will animate on the homepage. Inside that, I have taken ten empty div elements. Underneath the box div, I have taken an h2 tag with some random text in it. That's is with HTML, and now we move forward with the CSS markup.

You may also like:

• Creative Pricing table design using Bootstrap
• Animated Typewriter text effect using JQuery
• Awesome Bootstrap slider with Text Animation

In the CSS markup, we first need to discard the document's default padding and the margin. Therefore we set the padding and margin to 0 for the universal selector. Then I have provided a 100% width and a height of 100vh to the box div element and gave it a nice looking bluish gradient color in the background. I have given it an absolute position value for positioning the text in the h2 tag in the middle of the document. After setting up a top and left value 50%, I used transform translate property to bring the text in the middle. After that, I did some basic styling for the banner text like giving it the color, text-transform,font-weight, font-family, and font-size.

For the animation, we first have to style the divs in the ''box' class. I have given a universal height and width of 60px for all the ten div I am using. Then I have given it absolute position value. Now I scattered the div around the homepage by increasing and decreasing each div's top and left value. You can position them according to your needs by changing each div inside the box class's top and left value. I provided a rgba background color and set animation with the name 'animate.' i took animation duration of 4s, animation direction linear, and an animation iteration count of infinite. I also provided a border-radius to all the div to make it look nice. After that, I have set different animation duration for each div to animate a sequential way. In keyframe CSS markup, I put the CSS so that all divs animate from a scale from 0 to 1.6.  After that, I provided translate value from 0 to -250px to Y direction and rotated animation from 50deg to 360deg.

To create the animation effect, you need to create two separate files of HTML and CSS. After copying the code down below, paste them to your project, run the project in your browser, and see how it works.

HTML:

<div class="box"> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> <h2> Animated Background</h2>


CSS:

* { margin: 0; padding: 0; } .box { width: 100%; height: 100vh; background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); } h2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-family: lato; font-weight: 900; text-transform: uppercase; font-size: 60px; } .box div { height: 60px; width: 60px; position: absolute; top: 10%; left: 10%; animation: animate 4s linear infinite; background: rgba(255,255,255,.5); border-radius: 15px; } .box div:nth-child(1) { top: 20%; left: 20%; animation: animate 8s linear infinite; } .box div:nth-child(2) { top: 26%; left: 89%; animation: animate 10s linear infinite; } .box div:nth-child(3) { top: 80%; left: 90%; animation: animate 5s linear infinite; } .box div:nth-child(4) { top: 65%; left: 75%; animation: animate 7s linear infinite; } .box div:nth-child(5) { top: 90%; left: 10%; animation: animate 9s linear infinite; } .box div:nth-child(6) { top: 30%; left: 60%; animation: animate 5s linear infinite; } .box div:nth-child(7) { top: 70%; left: 33%; animation: animate 8s linear infinite; } .box div:nth-child(8) { top: 75%; left: 60%; animation: animate 10s linear infinite; } .box div:nth-child(9) { top: 23%; left: 50%; animation: animate 6s linear infinite; } .box div:nth-child(10) { top: 35%; left: 7%; animation: animate 10s linear infinite; } @keyframes animate { 0% { transform: scale(0) translateY(0) rotate(50deg); } 100% { transform: scale(1.6) translateY(-250px) rotate(360deg); } }

I hope you liked the snippet. Please leave a comment if you have any questions regarding this.  I will try to answer them as soon as I can. Thanks for visiting the blog.