In this article, we will learn to bind an animation to a div tag using CSS.
A div tag is used to separate the different sections of the contents in the webpage. It makes it very easy for the readers to notice the different sections of the webpage with their specific importance level on the page. Therefore, a div tag can be used to contain different parts of the webpage, and it can also contain texts, images, animations, etc according to the requirements of the webpage.
Approach: There are few steps that must be followed to bind an animation inside a div tag:
- Create a basic HTML page which contains <head>, <title>, <body> elements.
- Create a <div> container with a specific class name and add another <div> container which will contain the animation part of the HTML document inside it. This is created in the <body> section of the HTML document.
- Make sure that the <div> tag containing the class name must match with the name of the class in the CSS properties.
Example: The following example demonstrates the binding of an animation to a division element using CSS.
HTML
<!DOCTYPE html><html>
<head>
<title>How to bind an animation to a division element using CSS ?</title>
</head>
<body>
<div class="gfg">
<p>GeeksforGeeks</p>
<div class="circle_1"></div>
</div>
<style type="text/css">
.gfg {
color: green;
float: center;
margin-right: 2%;
font-size: 60px;
}
.circle_1 {
display: block;
width: 100px;
height: 100px;
background: #056608;
border-radius: 50%;
background: -webkit-radial-gradient(25px 25px, circle, #228b22, #000);
background: -moz-radial-gradient(25px 25px, circle, #228b22, #000);
background: radial-gradient(25px 25px, circle, #228b22, #000);
/* Animation to spin and move the sphere */
-webkit-animation: spin 1000ms linear infinite,
moveLeftToRight 5s linear infinite;
-moz-animation: spin 1000ms linear infinite,
moveLeftToRight 5s linear infinite;
-ms-animation: spin 1000ms linear infinite,
moveLeftToRight 5s linear infinite;
animation: spin 1000ms linear infinite,
moveLeftToRight 5s linear infinite;
-webkit-transition: all 1s ease;
transition: all 1s ease;
position: absolute;
left: 0;
}
/* Spinning the sphere using key frames */
@-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
/* Move sphere from left to right */
@-moz-keyframes moveLeftToRight {
0% {
left: -100px;
}
100% {
left: 100%;
}
}
@-ms-keyframes moveLeftToRight {
0% {
left: -100px;
}
100% {
left: 100%;
}
}
@keyframes moveLeftToRight {
0% {
left: -100px;
}
100% {
left: 100%;
}
}
@-webkit-keyframes moveLeftToRight {
0% {
left: -100px;
}
100% {
left: 100%;
}
}
</style>
</body>
</html>
|
Output: