Transiciones y Animaciones Simples en CSS

Transiciones y animaciones en CSS permiten crear efectos visuales suaves y dinámicos que mejoran la experiencia del usuario. Aquí te presento los conceptos básicos y ejemplos de cómo utilizarlos.

1. Transiciones en CSS

Las transiciones permiten que los cambios de propiedad en los elementos ocurran de manera gradual, en lugar de instantánea. Se definen utilizando la propiedad transition.

• Sintaxis Básica:

elemento {
    transition: propiedad duración función-de-tiempo;
}

• propiedad: La propiedad CSS que cambiará.
• duración: El tiempo que tarda en completarse la transición (e.g., 0.3s para 0.3 segundos).
• función-de-tiempo: La función de tiempo que define la aceleración de la transición (e.g., ease, linear, ease-in, ease-out, ease-in-out).

Ejemplo de Transición:

.caja {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    transition: width 0.5s ease, background-color 0.5s ease;
}

.caja:hover {
    width: 200px;
    background-color: lightcoral;
}

HTML:

<div class="caja"></div>

En este ejemplo, cuando el usuario pasa el cursor sobre la caja (.caja), su ancho y color de fondo cambian gradualmente durante 0.5 segundos.

2. Animaciones en CSS

Las animaciones en CSS permiten crear secuencias de cambios de estilo que se ejecutan de manera repetitiva o en bucle. Se definen utilizando las propiedades @keyframes y animation.

• Definir Animaciones:
  • Utiliza @keyframes para definir los pasos de la animación.
  • La propiedad animation se usa para aplicar la animación a un elemento.
• Sintaxis de @keyframes:

@keyframes nombre-de-la-animacion {
    from {
        propiedad: valor-inicial;
    }
    to {
        propiedad: valor-final;
    }
}

Sintaxis de animation:

elemento {
    animation: nombre-de-la-animacion duración función-de-tiempo retraso cantidad-de-repeticiones;
}

• nombre-de-la-animacion: El nombre que se define en @keyframes.
• duración: El tiempo total de la animación.
• función-de-tiempo: Define cómo cambia la animación a lo largo del tiempo (e.g., ease, linear).
• retraso: El tiempo antes de que comience la animación (e.g., 1s).
• cantidad-de-repeticiones: Cuántas veces se repite la animación (infinite para infinito).

Ejemplo de Animación:

@keyframes cambio-color {
    from {
        background-color: lightblue;
    }
    to {
        background-color: lightcoral;
    }
}

.animacion {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    animation: cambio-color 2s infinite alternate;
}

HTML:

<div class="animacion"></div>

En este ejemplo, el color de fondo de la caja (.animacion) cambia de lightblue a lightcoral en un ciclo de 2 segundos, repitiéndose infinitamente y alternando entre los colores.