<!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
>