En este artículo, aprenderemos a vincular una animación a una etiqueta div usando CSS.
Una etiqueta div se utiliza para separar las diferentes secciones de los contenidos de la página web. Hace que sea muy fácil para los lectores notar las diferentes secciones de la página web con su nivel de importancia específico en la página. Por lo tanto, una etiqueta div puede usarse para contener diferentes partes de la página web, y también puede contener textos, imágenes, animaciones, etc. según los requisitos de la página web.
Enfoque: hay algunos pasos que deben seguirse para vincular una animación dentro de una etiqueta div :
- Cree una página HTML básica que contenga los elementos <head> , <title> , <body> .
- Cree un contenedor <div> con un nombre de clase específico y agregue otro contenedor <div> que contendrá la parte de animación del documento HTML en su interior. Esto se crea en la sección <body> del documento HTML.
- Asegúrese de que la etiqueta <div> que contiene el nombre de la clase debe coincidir con el nombre de la clase en las propiedades de CSS.
Ejemplo: El siguiente ejemplo demuestra el enlace de una animación a un elemento de división usando CSS .
HTML
<!DOCTYPE html>
<html>
<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>
Producción:
