¡Hola Platzi Team! 🚀
Hoy quiero mostrar cómo puedes crear animaciones en CSS usando keyframes. Esto puede ayudarte a dar vida a tus sitios web y mejorar la experiencia del usuario. Vamos a ver cómo funciona paso a paso.
¿Qué son las Keyframes en CSS?
Las keyframes son una característica de CSS3 que nos permiten crear animaciones complejas y personalizadas definiendo varios estados de una animación y cómo se debe animar entre ellos.
Estructura básica de una animación con keyframes
La estructura básica de una animación con keyframes se ve así:
@keyframes nombreDeLaAnimacion {
0% {
/* Propiedades al inicio de la animación */
}
50% {
/* Propiedades a la mitad de la animación */
}
100% {
/* Propiedades al final de la animación */
}
}
Cómo crear una animación con Keyframes
Vamos a crear una animación básica que cambia el color de fondo de un div.
@keyframes cambioColor {
0% {
background-color: red;
}
50% {
background-color: green;
}
100% {
background-color: blue;
}
}
.miDiv {
animation: cambioColor 3s infinite;
}
Esto hará que el div cambie su color de fondo de rojo a verde a azul en un ciclo de 3 segundos, y luego repita la animación indefinidamente.
Animación avanzada con Keyframes
Ahora que sabes cómo crear una animación básica, puedes experimentar y crear animaciones más complejas. Por ejemplo, puedes combinar varias propiedades a la vez:
@keyframes animacionAvanzada {
0% {
background-color: red;
transform: rotate(0deg);
}
50% {
background-color: green;
transform: rotate(180deg);
}
100% {
background-color: blue;
transform: rotate(360deg);
}
}
Y luego aplicarlo a un div:
.miDiv {
animation: animacionAvanzada 3s infinite;
}
¡Felicidades!👩🚀👨🚀 Aprendiste cómo usar keyframes en CSS para crear animaciones
¡No olvides practicar y experimentar con diferentes animaciones!
¡Hasta la próxima aventura! 🚀
