This is an example

DIV ANIMATION - Code With Bishal


Learn how to make a DIV ANIMATION with the help of HTML5 AND CSS.

This is a DIV ANIMATION Made With HTML and CSS By Code With Bishal . Just Copy The Code From Here And Paste It Into Your Website. To Preview the button scroll the page. If you are having any problem viewing the code just refresh the page DIV ANIMATION is a lightweight and easy-to-use HTML AND CSS code that creates a DIV ANIMATION for you. In this blog [DIV ANIMATION], there are five sections on the webpage, in the first section you can get the overview of the blog, in the second section there are few more coding blogs you might like,in the third section you can see the demo of the button made with HTML and CSS, to view the fourth section click on the "View Code" button to reveal the code after that you can copy the code and paste it [that's the fifth section]

You might like this :

ANIMATED BUTTON USING HTML AND CSS
Few days ago
DIV ONLY VISIBLE ON HOVER USING HTML AND CSS
Few days ago
SIMPLE BUTTON USING HTML AND CSS
Few days ago


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>
Copy Contents

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