Tutorial CSS: Animaciones y transiciones

¿Qué son las transiciones en CSS y para qué se utilizan?

Las transiciones en CSS permiten que los valores de las propiedades CSS cambien de una manera suave en lugar de abrupta. Esto se logra especificando la duración del cambio y, opcionalmente, una función de temporización (timing function), un retardo (delay) y las propiedades específicas que deben cambiar.

Las transiciones se utilizan para mejorar la experiencia del usuario haciendo que las interacciones con una página web sean más fluidas y atractivas visualmente. En lugar de cambiar instantáneamente de un estado a otro, las animaciones de transición permiten que el ojo humano siga el cambio de una manera natural y continua.

Las aplicaciones prácticas de las transiciones en CSS incluyen:

• Hover states: Cambiar el color de fondo, el tamaño de la fuente u otros estilos cuando un usuario pasa el ratón sobre un elemento.

.button {
    background-color: #4CAF50;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #45a049;
}

1. Focus states: Suavizar los cambios cuando un campo de formulario recibe o pierde el foco.

input:focus {
    border-color: #66afe9;
    box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
    transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

• Navigation menus: Mostrar o ocultar elementos del menú con un desvanecimiento en lugar de aparecer o desaparecer instantáneamente.

.menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

.menu.open {
    max-height: 500px;
}

• Feedback visual: Proporcionar feedback de las acciones del usuario, como el envío de formularios o la activación de botones, para que la interfaz parezca más responsiva y sofisticada.

La clave de las transiciones eficientes y atractivas radica en encontrar el equilibrio adecuado entre la duración y la función de temporización, adaptándolos al contexto específico del diseño de la interfaz de usuario. Utilizadas correctamente, las transiciones pueden elevar la calidad de cualquier diseño web, mejorando la usabilidad y la estética de la página.

Sintaxis de transiciones y usos comunes

La propiedad transition es fundamental para crear transiciones en CSS. Su sintaxis básica consiste en especificar cuatro componentes opcionales: la propiedad que cambiará, la duración del cambio, la función de temporización y el retraso. La sintaxis es la siguiente:

selector {
    transition: [property] [duration] [timing-function] [delay];
}

Si no se especifica alguna de estas propiedades, se utilizarán los valores initial.

Ejemplo básico

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 2s; /* Change width over 2 seconds */
}

.box:hover {
    width: 200px; /* New width on hover */
}

En este ejemplo, el ancho del cuadro cambiará de 100px a 200px de manera suave durante 2 segundos cuando el ratón lo pase sobre el elemento.

Especificar múltiples propiedades

Se pueden definir transiciones para múltiples propiedades CSS separándolas por comas.

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 2s, height 2s, background-color 2s;
}

.box:hover {
    width: 200px;
    height: 200px;
    background-color: blue;
}

En este caso, el ancho, la altura y el color de fondo se transicionarán simultáneamente cuando se pase el ratón sobre el elemento.

timing-function

La función de temporización (timing-function) define cómo la transición progresará. Las funciones más comunes incluyen ease, linear, ease-in, ease-out, ease-in-out y también se puede especificar una función de Bézier cúbica personalizada.

.box {
    transition: width 2s ease-in-out;
}

El valor ease-in-out hará que la transición comience y termine lentamente, con una velocidad intermedia constante.

cubic-bezier

Se puede especificar una función de Bézier cúbica personalizada para un control más fino sobre la transición.

.box {
    transition: width 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

Este ejemplo crea una transición más dramática y puede ser útil para crear efectos más complejos.

delay

El valor de delay introduce un retraso antes de que comience la transición.

.box {
    transition: width 2s ease 1s; /* Delay of 1s before transition starts */
}

En este ejemplo, la transición no comenzará hasta que haya transcurrido 1 segundo.

shorthand vs. propiedades individuales

Aunque es común usar la propiedad abreviada transition, también se pueden especificar las propiedades de transición individualmente:

• transition-property: Define las propiedades para las cuales se aplicará la transición.
• transition-duration: Establece la duración de la transición.
• transition-timing-function: Configura la función de temporización.
• transition-delay: Especifica el retraso antes de que comience la transición.

.box {
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
    transition-delay: 1s;
}

Usar propiedades individuales puede ser útil para una mayor legibilidad y especificidad en archivos CSS grandes.

Usos comunes y prácticas recomendadas

• Desplegables: Hacer que los elementos emergentes aparezcan y desaparezcan suavemente.

.dropdown {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dropdown.open {
    opacity: 1;
}

• Desplazamientos y transformaciones: Añadir movimiento suave a los elementos en respuesta a eventos del usuario.

.move {
    transform: translateX(0);
    transition: transform 0.5s ease-in-out;
}

.move:hover {
    transform: translateX(100px);
}

• Estados de formulario: Mejorar la experiencia del usuario en formularios cambiando visualmente los input fields.

.input-field {
    border: 1px solid #ccc;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.input-field:focus {
    border-color: #0066cc;
    box-shadow: 0 0 5px rgba(0, 102, 204, 0.5);
}

Las transiciones en CSS permiten añadir sofisticación y funcionalidad, proporcionando una interfaz más atractiva y responsiva.

¿Qué son las animaciones en CSS y para qué se utilizan?

Las animaciones en CSS permiten la creación de movimientos más complejos que las transiciones, ofreciendo mayor control sobre los pasos intermedios de una animación. A diferencia de las transiciones, donde el cambio ocurre entre dos estados (inicio y fin), las animaciones permiten definir múltiples pasos en un proceso, denominados keyframes. Cada keyframe puede definir un estado intermedio y se especifica en determinados puntos del tiempo de la animación, proporcionando granularidad y precisión en el movimiento.

Las animaciones en CSS se utilizan para crear efectos visuales avanzados y mejorar la interacción del usuario con la interfaz. Pueden animar casi cualquier propiedad CSS, como posición, tamaño, color y opacidad, de manera secuencial y repetitiva si se desea.

Principales usos de las animaciones en CSS:

• Enhancements de UI: Mejorar la experiencia del usuario proporcionando feedback visual para interacciones, como al cargar datos.

@keyframes loading {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner {
    animation: loading 2s linear infinite;
}

• Storytelling: Crear narrativas visuales con movimientos fluidos para guiar al usuario a través de los contenidos.

@keyframes slidein {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.sliding-menu {
    animation: slidein 1s ease-in-out;
}

• Atención gráfica: Atraer la atención hacia elementos específicos mediante animaciones recurrentes.

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.highlight {
    animation: pulse 1s infinite;
}

• Emulación de físicas reales: Imitar el comportamiento natural de objetos, proporcionando una sensación más natural y menos artificial.

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-30px); }
    60% { transform: translateY(-15px); }
}

.bouncing {
    animation: bounce 2s;
}

Las animaciones en CSS se definen con la propiedad animation, que puede especificar la duración, la función de temporización, el número de repeticiones y otros parámetros. Los keyframes se crean utilizando la regla @keyframes, donde se definen los estados intermedios de la animación.

@keyframes example {
    0% { background-color: red; left: 0px; top: 0px; }
    25% { background-color: yellow; left: 200px; top: 0px; }
    50% { background-color: blue; left: 200px; top: 200px; }
    75% { background-color: green; left: 0px; top: 200px; }
    100% { background-color: red; left: 0px; top: 0px; }
}

.box {
    position: absolute;
    animation: example 5s linear infinite;
}

Este ejemplo muestra una animación que mueve un elemento a lo largo de un cuadrado mientras cambia su color, repitiéndose indefinidamente con una duración de 5 segundos por ciclo. La animación está controlada por los keyframes que definen el comportamiento en los porcentajes 0%, 25%, 50%, 75%, y 100% del ciclo completo.

Las animaciones en CSS permiten tanto mejorar la estética de una página web como proporcionar información visual del estado de la interfaz y las interacciones del usuario.

Sintaxis de animaciones y usos comunes

Para definir animaciones en CSS se utilizan las propiedades asociadas a animation y la regla @keyframes. La propiedad animation permite controlar distintos aspectos de la animación como su duración, el timing function, el número de repeticiones, entre otros. La regla @keyframes es donde se definen los estados intermedios de la animación en términos de diferentes etapas temporales.

La sintaxis básica para definir una animación es la siguiente:

selector {
    animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];
}

• name: Nombre de la animación asociada con @keyframes.
• duration: Duración de la animación (ej. 2s para 2 segundos).
• timing-function: Cómo progresa la animación en el tiempo. Valores comunes: ease, linear, ease-in, ease-out, ease-in-out.
• delay: Tiempo de espera antes de que comience la animación.
• iteration-count: Número de veces que la animación se repite. Valores comunes: <number> o infinite.
• direction: Dirección de la animación. Valores: normal, reverse, alternate, alternate-reverse.
• fill-mode: Cómo aplica el estilo de la animación fuera de su tiempo de ejecución. Valores: none, forwards, backwards, both.
• play-state: Estado de la animación. Valores: running, paused.

Definición de @keyframes

La regla @keyframes define el movimiento y los cambios en las propiedades CSS en diferentes puntos de la línea de tiempo de la animación. La estructura básica es:

@keyframes nombre_animacion {
    0% { /* estado inicial */ }
    50% { /* estado intermedio */ }
    100% { /* estado final */ }
}

Ejemplo básico

@keyframes example {
    0% { background-color: red; left: 0px; }
    50% { background-color: yellow; left: 100px; }
    100% { background-color: green; left: 200px; }
}

.box {
    position: absolute;
    animation: example 4s linear infinite;
}

En este ejemplo, el elemento .box cambia de color y posición de izquierda a derecha en un ciclo de 4 segundos que se repite indefinidamente.

Múltiples animaciones en un mismo selector

Se pueden definir múltiples animaciones en un mismo selector separándolas por comas.

@keyframes move {
    0% { top: 0px; }
    100% { top: 200px; }
}

@keyframes colorChange {
    0% { background-color: red; }
    100% { background-color: blue; }
}

.elemento {
    position: absolute;
    animation: move 2s ease-in-out, colorChange 2s ease-in-out;
}

control de parámetros individuales

También es posible especificar propiedades individuales para una configuración más detallada:

.box {
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

Usos comunes de las animaciones CSS

• Animaciones de entrada y salida:

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.fading-element {
    animation: fadeIn 2s ease-in;
}

• Animaciones de carga:

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner {
    animation: rotate 1s linear infinite;
}

• Animaciones de atención:

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-10px); }
}

.shaking-element {
    animation: shake 0.5s ease-in-out infinite;
}

• Animaciones secuenciales:

@keyframes stepAnimation {
    0% { opacity: 0; transform: translateY(-20px); }
    50% { opacity: 0.5; transform: translateY(0); }
    100% { opacity: 1; transform: translateY(-20px); }
}

.sequential {
    animation: stepAnimation 3s steps(5, end) infinite;
}

Las animaciones permiten elevar la experiencia del usuario, añadiendo dinámica y retroalimentación visual para mejorar la usabilidad y la estética de una página web.