6.1 Regla @keyframes
Las animaciones CSS permiten crear efectos visuales complejos y suaves con un mínimo esfuerzo. La herramienta principal
para crear animaciones en CSS es la regla @keyframes, que define los fotogramas clave de la animación y los cambios
de estilos que deben ocurrir en cada fotograma.
La regla @keyframes se utiliza para crear animaciones, definiendo cambios en propiedades CSS en diferentes etapas de la ejecución
de la animación. Los fotogramas clave determinan qué estilos se aplicarán en momentos determinados durante el proceso de animación.
Sintaxis 1:
@keyframes animation-name {
from {
/* estilos iniciales */
}
to {
/* estilos finales */
}
}
Sintaxis 2:
@keyframes animation-name {
0% {
/* estilos iniciales */
}
100% {
/* estilos finales */
}
}
Donde:
fromcorresponde al0%del tiempo de la animacióntocorresponde al100%del tiempo de la animación
Ejemplo: Cambio suave del color de fondo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Animation Example</title>
<style>
@keyframes changeColor {
from {
background-color: lightblue;
}
to {
background-color: lightcoral;
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: changeColor 3s infinite;
}
</style>
</head>
<body>
<div class="animated-box">¡Pasa el ratón por encima!</div>
</body>
</html>
Explicación:
- la regla
@keyframes changeColordefine una animación que cambia el color de fondo del elemento delightbluealightcoral - la propiedad
animationen el elemento.animated-boxindica que la animaciónchangeColordebe durar 3 segundos y repetirse infinitamente
6.2 Varios fotogramas clave
Puedes usar más de dos fotogramas clave para crear animaciones más complejas, definiendo estilos para estados intermedios.
Ejemplo: Movimiento diagonal con cambio de color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Keyframes Example</title>
<style>
@keyframes moveAndChangeColor {
0% {
background-color: lightblue;
transform: translate(0, 0);
}
50% {
background-color: lightgreen;
transform: translate(100px, 100px);
}
100% {
background-color: lightcoral;
transform: translate(200px, 0);
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: moveAndChangeColor 5s infinite;
}
</style>
</head>
<body>
<div class="animated-box">¡Mírame mover!</div>
</body>
</html>
Explicación:
La regla @keyframes moveAndChangeColor define una animación que cambia el color de fondo y la posición del elemento en tres etapas.
- En el 0% del tiempo de la animación, el elemento tiene un color azul claro y está en su posición inicial
- En el 50% del tiempo de la animación, el elemento tiene un color verde claro y se mueve 100 píxeles a la derecha y hacia abajo
- En el 100% del tiempo de la animación, el elemento tiene un color coral claro y se mueve 200 píxeles a la derecha
6.3 Ejemplos de animaciones simples
Ejemplo 1: Pulsación
Creación de un efecto de pulsación, donde el elemento aumenta y disminuye suavemente.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pulsing Effect</title>
<style>
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.pulse-box {
width: 150px;
height: 150px;
background-color: lightpink;
animation: pulse 2s infinite;
}
</style>
</head>
<body>
<div class="pulse-box">Pulsando</div>
</body>
</html>
Explicación:
- la regla
@keyframes pulsedefine una animación que aumenta el elemento hasta el 120% y lo regresa a su tamaño original - la propiedad
animationen el elemento.pulse-boxindica que la animaciónpulsedebe durar 2 segundos y repetirse infinitamente
Ejemplo 2: Rotación
Creación de un efecto de rotación continua del elemento:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Effect</title>
<style>
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate-box {
width: 100px;
height: 100px;
background-color: lightseagreen;
animation: rotate 3s infinite linear;
}
</style>
</head>
<body>
<div class="rotate-box">Rotando</div>
</body>
</html>
Explicación:
- la regla
@keyframes rotatedefine una animación que rota el elemento de 0 a 360 grados -
la propiedad
animationen el elemento.rotate-boxindica que la animaciónrotatedebe durar 3 segundos, repetirse infinitamente y ocurrir a una velocidad constante (linear)
GO TO FULL VERSION