Apuntes css

¿Para qué quieres herencias cuando tienes !important?

Transiciones y Animaciones en CSS

CSS permite dotar a las páginas web de movimiento e interactividad. Las transiciones permiten cambios suaves entre estados (como un botón que cambia de color al pasar el ratón), mientras que las animaciones crean secuencias más complejas (como un elemento que se mueve o parpadea). En esta lección veremos los conceptos básicos de ambas herramientas para dar vida a los elementos de una página.

Transiciones

Las transiciones hacen que los cambios de estilo (por ejemplo, color o tamaño) sean suaves en lugar de instantáneos. Se activan mediante eventos como :hover.

Propiedades de transición

  • transition-property: qué propiedad animar (por ejemplo, color, width, all).
  • transition-duration: cuánto dura la transición (ej. 0.3s, 500ms).
  • transition-timing-function: ritmo del cambio (ease, linear, ease-in-out).
  • transition-delay: retardo antes de empezar (ej. 0.2s).

Abreviada: transition: property duration timing-function delay;

.boton {
    background-color: blue;
    color: white;
    padding: 10px;
    transition: background-color 0.3s ease;
}
.boton:hover {
    background-color: green;
}

Animaciones

Las animaciones usan @keyframes para definir secuencias de estilos. Son más flexibles que las transiciones, ya que no dependen de eventos como :hover.

Propiedades de animación

  • animation-name: nombre de la animación (@keyframes).
  • animation-duration: duración total.
  • animation-iteration-count: cuántas veces se repite (infinite, 3, etc.).
  • animation-timing-function: ritmo del cambio.

Abreviada: animation: name duration timing-function iteration-count;

Definir @keyframes

.caja {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: mover 2s infinite;
}
@keyframes mover {
    0% { transform: translateX(0); }
    50% { transform: translateX(100px); }
    100% { transform: translateX(0); }
}

Ejemplo combinado

<button class="boton">Pasa el ratón</button>
<div class="caja"></div>

El botón cambia de color al pasar el ratón (transición) y la caja se mueve continuamente (animación).

Buenas prácticas

Accesibilidad:

  • Usa prefers-reduced-motion para respetar la preferencia del usuario:
@media (prefers-reduced-motion: reduce) {
    .boton, .caja {
        transition: none;
        animation: none;
    }
}
  • Evita efectos agresivos o parpadeos rápidos.

Rendimiento:

  • Anima propiedades ligeras como transform y opacity.
  • Evita animar width, height, margin, etc., que requieren recálculo de diseño.

Diseño adaptable:

  • Combina transiciones con pseudoclases o media queries para mejorar la interacción móvil.

Compatibilidad: Transiciones y animaciones están soportadas en todos los navegadores modernos. Prefijos como -webkit- ya no son necesarios.

TOP