Animaciones en CSS

Las animaciones en CSS permiten agregar efectos dinámicos y visualmente atractivos a los elementos de una página web. A diferencia de las transiciones, que solo permiten realizar cambios suaves entre dos estados, las animaciones en CSS permiten realizar cambios más complejos, con múltiples etapas y duración variable.

Propiedad `@keyframes`

Para crear una animación en CSS, primero debes definir las etapas de la animación utilizando la regla @keyframes. Esta regla especifica los estilos de un elemento en diferentes puntos de su ciclo de animación.

La sintaxis básica de @keyframes es la siguiente:


@keyframes nombreDeLaAnimacion {
    from {
    /* Estado inicial */
    }
    to {
    /* Estado final */
    }
}

En este ejemplo, la animación se define entre el estado inicial (from) y el estado final (to), pero puedes especificar más puntos intermedios para crear animaciones más complejas.

Ejemplo de animación simple

Este es un ejemplo de una animación básica que mueve un cuadrado de izquierda a derecha:


@keyframes moverDerecha {
    from {
    transform: translateX(0);
    }
    to {
    transform: translateX(200px);
    }
}
        
.cuadro {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    animation: moverDerecha 2s infinite;
}

En este ejemplo, el cuadrado se mueve desde su posición original (translateX(0)) hasta 200 píxeles hacia la derecha (translateX(200px)) en un ciclo de 2 segundos que se repite indefinidamente (infinite).

Propiedades de la animación

Una animación en CSS se puede controlar mediante varias propiedades. Aquí están las más importantes:

animation-name: Especifica el nombre de la animación (la que se definió con @keyframes).
animation-duration: Especifica cuánto durará la animación.
animation-timing-function: Define el ritmo de la animación (como linear, ease, ease-in, etc.).
animation-delay: Define el tiempo de espera antes de que comience la animación.
animation-iteration-count: Especifica cuántas veces debe repetirse la animación (por ejemplo, infinite para que se repita infinitamente).
animation-direction: Controla si la animación se repite en sentido normal o inverso (por ejemplo, normal, reverse, alternate).
animation-fill-mode: Especifica cómo debe comportarse el elemento después de que la animación haya finalizado (por ejemplo, forwards o backwards).

Ejemplo de animación con todas las propiedades

Ahora vamos a usar varias propiedades para controlar la animación:


@keyframes cambioColor {
    0% {
        background-color: #4CAF50;
    }
    50% {
        background-color: #FF6347;
    }
    100% {
        background-color: #4CAF50;
    }
}
        
.cuadro {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    animation-name: cambioColor;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: infinite;
}

En este caso, el cuadrado cambia de color durante 3 segundos y luego vuelve al color original, con un retraso de 1 segundo antes de que comience la animación. La animación se repetirá infinitamente con un ritmo suave al inicio y al final (ease-in-out).

Animaciones con transformaciones

Las animaciones también pueden aplicarse a transformaciones, como rotaciones, escalado o desplazamientos. Este es un ejemplo de cómo hacer que un cuadro gire:


@keyframes rotar {
    from {
    transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
        
.cuadro {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    animation: rotar 2s infinite;
}

En este caso, el cuadrado rota 360 grados durante 2 segundos y luego repite la animación infinitamente.

Animaciones con `cubic-bezier()`

También puedes personalizar el ritmo de la animación utilizando la función cubic-bezier(), que permite crear una curva de Bézier personalizada para la transición. Aquí tienes un ejemplo:


@keyframes mover {
    from {
        left: 0;
    }
    to {
        left: 300px;
    }
}
        
.cuadro {
    width: 100px;
    height: 100px;
    position: absolute;
    background-color: #4CAF50;
    animation: mover 2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

En este caso, el cuadrado se mueve de izquierda a derecha utilizando una curva de Bézier personalizada que hace que la animación empiece rápidamente y termine más lentamente.

Conclusión

Las animaciones en CSS son una herramienta poderosa para mejorar la interacción en un sitio web. A través de la regla @keyframes, puedes crear efectos visuales complejos y dinámicos con facilidad. Puedes controlar las animaciones con diversas propiedades y aplicar transformaciones como rotaciones, escalados y desplazamientos.

Recuerda que las animaciones deben usarse con moderación para evitar sobrecargar la página o distraer demasiado al usuario. Úsalas para mejorar la experiencia de usuario sin restarle claridad o accesibilidad a tu sitio web.

Anterior Siguiente