Div Animation using HMTL and CSS
Posted on Feb. 1, 2021, 8 p.m. by Bishal ( 3300)
In this blog of Code With Bishal, I am going to show you how can you create a Div animation using CSS. So, stay with me till the end and you will get all the downloadable resources.
So, What actually is a Div animation?
HTML <div></div> tag defines a division in a HTML file. The <div></div> tag can be used with class="" and id="" attribute to style (using CSS or JavaScript) and add functionalities (using JavaScript). Usually, it is used as a container in a HTML document. Any HTML elements can be wrapped inside a <div></div>. The HTML <div></div> is also used to make a webpage responsive by wrapping an element. In this blog I am going to create a simple CSS animation using the <div></div> tag
In HTML, <div></div> is a block-level element. That is, it always starts on a new line. For example, :
div{
display: block;
}
Here is a <div></div> tag usage example:
<div class="container">
<h1>This element is wrapped inside a div container</h1>
</div>
How can I try the code before downloading the resources?
You can try and customize the code using the try now button below or keep reading you will find a demo in this page.
Demo Animation:
Step by step guide for creating a Div animation:
-
Create a file with the name
index.html -
Open
index.html -
Add the Broiler plate of HTML
Broiler Plate of HTML:
<!DOCTYPE html>
<html>
<head>
<title>Div animation - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
-
Create a file
style.css -
Link External CSS with your HTML file
Here is how can you link:
Add these code in the <head> </head> of your HTML document:
<link rel="stylesheet" href="style.css">
Now add some style to your button:
Add these code to the style.css file
.pure-css-slider {
width: 270px;/*change this to change the width of the DIV*/
height: 100px;/*change this to change the height of the DIV*/
position: relative;
background: #000;
-webkit-animation: pure-css-slidermove 5s infinite;/*change "5s" with your desired time*/
animation: pure-css-slidermove 5s infinite;/*change "5s" with your desired time*/
}
@-webkit-keyframes pure-css-slidermove {
0% {
top: 0px;
left: 0px;
background: #b3b3b3;
}
25% {
top: 0px;
left: 60%;
background: #ff4d4d;
}
50% {
top: 60%;
left: 60%;
background: #6666ff;
}
75% {
top: 60%;
left: 0px;
background: #4dff4d;
}
100% {
top: 0px;
left: 0px;
background: #b3b3b3;
}
}
@keyframes pure-css-slidermove {
0% {
top: 0px;
left: 0px;
background: #b3b3b3;
}
25% {
top: 0px;
left: 60%;
background: #ff4d4d;
}
50% {
top: 60%;
left: 60%;
background: #6666ff;
}
75% {
top: 60%;
left: 0px;
background: #4dff4d;
}
100% {
top: 0px;
left: 0px;
background: #b3b3b3;
}
}
.pure-css-slider p {
text-align: center;/*text alignment here*/
padding-top: 15%; /*padding of the text inside DIV*/
font-size: 25px;/*font size*/
}
Source Code
1) HTML Code:
<!DOCTYPE html>
<html>
<title>Div animation by Code With Bishal</title>
<body>
<!-- by Code With Bishal - www.codewithbishal.com -->
<div class="pure-css-slider">
<p> Your Text Here </p><!-- change "your text here" with your desired text -->
</div>
</body>
</html>
2) CSS Code:
.pure-css-slider {
width: 270px;/*change this to change the width of the DIV*/
height: 100px;/*change this to change the height of the DIV*/
position: relative;
background: #000;
-webkit-animation: pure-css-slidermove 5s infinite;/*change "5s" with your desired time*/
animation: pure-css-slidermove 5s infinite;/*change "5s" with your desired time*/
}
@-webkit-keyframes pure-css-slidermove {
0% {
top: 0px;
left: 0px;
background: #b3b3b3;
}
25% {
top: 0px;
left: 60%;
background: #ff4d4d;
}
50% {
top: 60%;
left: 60%;
background: #6666ff;
}
75% {
top: 60%;
left: 0px;
background: #4dff4d;
}
100% {
top: 0px;
left: 0px;
background: #b3b3b3;
}
}
@keyframes pure-css-slidermove {
0% {
top: 0px;
left: 0px;
background: #b3b3b3;
}
25% {
top: 0px;
left: 60%;
background: #ff4d4d;
}
50% {
top: 60%;
left: 60%;
background: #6666ff;
}
75% {
top: 60%;
left: 0px;
background: #4dff4d;
}
100% {
top: 0px;
left: 0px;
background: #b3b3b3;
}
}
.pure-css-slider p {
text-align: center;/*text alignment here*/
padding-top: 15%; /*padding of the text inside DIV*/
font-size: 25px;/*font size*/
}