Animated Background with Pure CSS and Html

byCodingFlicks -August 01, 2020

3

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. You can watch the video tutorial below if you want.

Video Tutorial:

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. We used a gradient background for the banner area, but you can use any background image here if you want.

Let's start with the 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, we have taken ten empty div elements. Underneath the box div, We 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:

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 we 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. We 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 of 50%, we used the transform translate property to bring the text to the middle. After that, we 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. We have given a universal height and width of 60px for all the ten divs we are using. Then we have given it absolute position value. Now we 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. We provided a rgba background color and set animation with the name 'animate.' we took an animation duration of 4s, animation direction linear, and an animation iteration count of infinite. We also provided a border radius to all the divs to make it look nice. After that, we set different animation duration for each div to animate a sequential way. In keyframe CSS markup, we put the CSS so that all divs animate from a scale from 0 to 1.6. After that, We provided translate value from 0 to -250px to the Y direction and rotated the 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 it to your project, run the project in your browser, and see how it works. You can also download the source code of this snippet from the download button below this blog post.

HTML:

  <!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Background with Pure CSS and HTML</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <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>
</body>
</html>

CSS:

  * {
	margin: 0;
	padding: 0;
}
.box {
	width: 100%;
	height: 100vh;
	background: linear-gradient(180deg, #eb3349, #f45c43);
}
h2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	text-align: center;
	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);
	}
}

We hope you liked the snippet. If you want more snippets like this, you can click the load more button on our homepage. Please leave a comment if you have any questions regarding this. Thanks for visiting the blog.

DOWNLOAD CODE

3 Comments

Please do not enter any spam link in the comment box.

Rohit2 August 2020 at 12:04
Such a nice animation. Carry on. Mate
ReplyDelete
Replies
WBRG6 October 2020 at 15:00
Hallo,
this question comes from Frankfurt/Main Germany:
is it possible to use for the animation little png-produkt-pictures instaead of the cubes - and how ?
vg Reinhard
ReplyDelete
Replies

Add comment

Post a Comment