Herramientas CSS para Transformaciones, Transiciones y Animaciones
En este artículo exploraremos las herramientas disponibles en CSS para crear transformaciones, transiciones y animaciones en los elementos de una página web.
Transformaciones
Las transformaciones en CSS permiten modificar elementos moviéndolos, rotándolos, escalándolos o inclinándolos, y pueden ser tanto en 2D como en 3D. Aunque estas transformaciones son estáticas por defecto, se pueden animar mediante transiciones o animaciones.
Ejemplo de transformación 2D y 3D:
#div1 {
transform: rotate(20deg); /* Rotación 2D de 20º */
}
#div2 {
transform: rotateY(150deg); /* Rotación 3D de 150º en el eje Y */
}
Transiciones
Las transiciones CSS permiten realizar cambios graduales de determinadas propiedades con una duración específica. Para definir una transición, se deben especificar:
- La(s) propiedad(es) a animar.
- La duración de la transición.
- Opcionalmente, el retraso y la curva de velocidad de la transición.
Las transiciones se activan cuando hay un cambio en el valor de la propiedad definida, ya sea a través de una pseudo-clase (como :hover) o mediante JavaScript. Solo las propiedades CSS animables pueden tener transiciones.
Ejemplo de transición en la propiedad width:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
En este ejemplo, al pasar el ratón sobre el div, su anchura cambiará gradualmente en 2 segundos.
Animaciones
Las animaciones CSS permiten ejecutar cambios de estilo de manera gradual a través de fotogramas clave (keyframes). Estos fotogramas clave definen los estados intermedios de la animación.
Ejemplo de animación:
/* Definición de la animación */
@keyframes cambios {
0% {
background-color: red;
width: 100px;
}
25% {
background-color: yellow;
width: 50px;
transform: translate(0, 100px);
}
50% {
background-color: blue;
width: 100px;
transform: translate(100px, 100px);
}
75% {
background-color: blue;
width: 150px;
transform: translate(100px, 0);
}
100% {
background-color: red;
width: 100px;
transform: translate(0, 0);
}
}
/* Elemento que recibe la animación */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: cambios;
animation-duration: 4s;
animation-iteration-count: infinite;
}
En este ejemplo:
- Se definen los fotogramas clave con
@keyframes, nombrando la animación (cambios). - Se especifican los estilos para cada porcentaje de la animación.
- Los cambios de estilo entre fotogramas se realizan mediante transiciones.
- Se asigna la animación al elemento deseado con
animation-name,animation-durationyanimation-iteration-count.
