Div Animation using HMTL and CSS


Posted on Feb. 1, 2021, 8 p.m. by Bishal     (  1750)


Card Thumbnail
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?

 

DigitalOcean Referral Badge

 

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, :

 

DigitalOcean Referral Badge

 

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:

Your Text Here

 

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

 

DigitalOcean Referral Badge

 

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*/
}

 

DigitalOcean Referral Badge

 

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>

 

DigitalOcean Referral Badge

 

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*/
}

 

DigitalOcean Referral Badge

 





Leave a Comment:
No comments Found. Be the First one to comment