Transiciones

Las transiciones de CSS te permiten cambiar los valores de las propiedades de forma suave y gradual, en lugar de que el cambio ocurra de golpe (por ejemplo, al pasar el cursor sobre un botón).

transition: [property] [duration] [timing-function] [delay];

Para que una transición funcione, necesitas dos cosas: la propiedad CSS que quieres cambiar y la duración del efecto.

Coloca siempre la propiedad transition en la clase del estado inicial (en .btn), no en el :hover. Si la pones en el :hover, la transición funcionará al entrar el cursor, pero desaparecerá bruscamente al quitarlo.

Propiedades transition
Propiedad	Descripción
transition	A shorthand property for setting the four transition properties
transition-property	El nombre de la propiedad CSS que quieres animar (ej. background-color, opacity, transform). Usa all si quieres aplicar la transición a todo lo que cambie.
transition-duration	Cuánto tiempo tarda en completarse la animación. Se define en segundos (s) o milisegundos (ms) (ej. 0.3s, 200ms).
transition-timing-function	La curva de aceleración del efecto. Determina si empieza rápido, lento o mantiene una velocidad constante.
transition-delay	El tiempo de espera antes de que la transición comience a ejecutarse.

Tipos de Curvas de Aceleración (timing-function)
Valor	Efecto	Ejemplo
ease	Inicio lento, acelera en el medio, final muy lento (por defecto).	Casi cualquier interacción orgánica.
linear	Velocidad constante de principio a fin.	Cambios de opacidad (opacity) o color puros.
ease-in	Comienza lento y acelera al final.	Elementos que salen de la pantalla.
ease-out	Comienza rápido y desacelera al final.	Elementos que entran a la pantalla o menús desplegables.
cubic-bezier(x1, y1, x2, y2)	Curva totalmente personalizada para efectos como rebotes.	Animaciones avanzadas de interfaz (UI).

.btn {
   background-color: #3498db;
   color: white;
   padding: 12px 24px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
  
   /* 1. Definimos la transición en el estado inicial */
   transition: background-color 0.3s ease, transform 0.2s ease-out;
}

/* 2. El estado final se activa con una pseudo-clase como :hover o :focus */
.btn:hover {
   background-color: #2980b9;
   transform: translateY(-3px);
}