Transiciones CSS
Las transiciones permiten aplicar efectos visuales gradualmente al cambiar el estilo de un elemento, sin depender de tecnologías externas como JavaScript o Flash. Este mecanismo facilita transiciones suaves entre estados, como al interactuar con el cursor.
| Propiedad | Descripción | Valores |
|---|---|---|
| transition-property | Especifica la propiedad CSS a la que se aplica la transición. | Cualquier propiedad CSS (ej: opacity, background-color). |
| transition-duration | Duración total de la transición. | Tiempo en segundos (s) o milisegundos (ms). |
| transition-timing-function | Define la curva de velocidad de la transición. | linear, ease, ease-in, ease-out, ease-in-out. |
| transition-delay | Retraso antes de iniciar la transición. | Tiempo en segundos o milisegundos. |
Ejemplo de código para una transición de opacidad y altura:
<style>
.caja {
ancho: 150px;
alto: 80px;
color-fondo: coral;
transición: opacidad 0.5s lineal 0s, alto 1.5s facil-dentro 0.2s;
}
.caja:hover {
opacidad: 0.6;
alto: 120px;
}
</style>
Código completo que cambia el color de fondo al pasar el cursor:
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Transición</title>
<style>
.contenedor {
ancho: 180px;
alto: 180px;
alineación-texto: centro;
linea-alto: 180px;
color-fondo: azul-claro;
}
.contenedor:hover {
color-fondo: aquamarina;
transición: todos 0.6s lineal 0s;
}
</style>
</head>
<body>
<div class="contenedor"></div>
</body>
</html>
Animaciones CSS
Las animaciones CSS ofrecen un control más preciso para crear cambios estilísticos complejos mediante cuadros clave (keyframes), permitiendo múltiples estados y repeticiones. Se definen usando porcentajes o palabras clave como "from" y "to".
| Propiedad | Descripción |
|---|---|
| animation-name | Nombre del conjunto de keyframes vinculado. |
| animation-duration | Tiempo total para completar un ciclo de animación. |
| animation-timing-function | Curva de velocidad durante la animación. |
| animation-delay | Retraso antes de que comience la animación. |
| animation-iteration-count | Número de repeticiones de la animación. |
| animation-direction | Dirección alternada de la animación (normal o inversa). |
| animation-play-state | Estado de reproducción (en ejecución o pausada). |
| animation-fill-mode | Estilos antes y después de la animación. |
Ejemplo básico de animación con cambio de coler:
@keyframes cambio-color {
desde {color-fondo: rojo;}
hasta {color-fondo: amarillo;}
}
.elemento {
ancho: 100px;
alto: 100px;
color-fondo: rojo;
nombre-animación: cambio-color;
duración-animación: 3s;
}
Código completo que anima posición y fondo en un ciclo:
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Animación CSS</title>
<style>
.cuadro {
ancho: 180px;
alto: 180px;
alineación-texto: centro;
linea-alto: 180px;
color-fondo: azul-claro;
posición: absoluto;
radio-borde: 50%;
animación: recorrido 6s lineal 1s infinito alterno;
}
@keyframes recorrido {
0% {color-fondo: rojo; izquierda: 0px; arriba: 0px;}
25% {color-fondo: amarillo; izquierda: 180px; arriba: 0px;}
50% {color-fondo: azul; izquierda: 180px; arriba: 180px;}
75% {color-fondo: verde; izquierda: 0px; arriba: 180px;}
100% {color-fondo: rojo; izquierda: 0px; arriba: 0px;}
}
</style>
</head>
<body>
<div class="cuadro"></div>
</body>
</html>