Como usar keyframes en CSS
joshuasainz95
5849
¡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.
Primera parte.
🥉Aprendiz
¿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 */
}
}
Segunda parte.
🥈Profesional
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.
1. Primero, define la animación con keyframes.
@keyframes cambioColor {
0% {
background-color: red;
}
50% {
background-color: green;
}
100% {
background-color: blue;
}
}
1. Luego, aplica esta animación a un elemento. Vamos a aplicarla a un div con la
clase “miDiv”.
.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.
Tercera parte.
🎖️Medalla al Mérito
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;
}
animation-name: como se especifica
animation-duration: como se especifica
animation-timing-function: como se especifica
animation-delay: como se especifica
animation-direction: como se especifica
animation-iteration-count: como se especifica
animation-fill-mode: como se especifica
animation-play-state: como se especifica
animation-timeline: a list, each item either a case-sensitive CSS identifier or
the keywords none, auto
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Transform</title>
<style>
.transform-example {
width: 100px;
height: 100px;
background-color: red;
transform: translate(50%, 0) scale(1.5);
transition: transform 0.5s; /* Para ver la animación suavemente */
</style>
</head>
<body>
<div class="transform-example"></div>
</body>
</html>
