¿Cómo puedo crear una transición CSS simple para suavizar cambios de estilo?

Para crear una transición CSS simple para suavizar los cambios de estilo, como los que ocurren al pasar el ratón sobre un elemento (:hover), se utiliza principalmente la propiedad transition.

1. Define el estado inicial del elemento: Estos son los estilos que el elemento tiene por defecto.
2. Aplica la propiedad transition al estado inicial: En la regla CSS del estado base de tu elemento (no en la regla del :hover), especifica qué propiedades quieres que se animen, cuánto tiempo debe durar la transición y, opcionalmente, la función de temporización y el retardo.
   • transition-property: La propiedad o propiedades CSS que quieres animar (ej. background-color, opacity, transform, o all para todas las propiedades animables).
   • transition-duration: La duración de la transición (ej. 0.3s, 500ms). Este valor es esencial.
   • transition-timing-function (opcional): Define la curva de aceleración de la transición (ej. ease (por defecto), linear, ease-in, ease-out, ease-in-out).
   • transition-delay (opcional): Especifica un retraso antes de que comience la transición.
   Puedes usar la propiedad abreviada transition para definir todo esto en una línea: transition: [property] [duration] [timing-function] [delay];
3. Define los estilos del estado final (ej. :hover): Especifica los nuevos valores para las propiedades que quieres cambiar cuando el elemento alcance ese estado.

Ejemplo Práctico:

Supongamos que tienes un botón y quieres que su color de fondo y el color del texto cambien suavemente al pasar el ratón por encima.

.mi-boton {
  background-color: #3498db; /* Azul */
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;

  /* Definimos la transición en el estado base */
  /* Animaremos 'background-color' y 'color' durante 0.3 segundos con una función 'ease' */
  transition: background-color 0.3s ease, color 0.3s ease;
  /* También podrías usar 'all 0.3s ease;' si quieres que todas las propiedades animables transicionen */
}

.mi-boton:hover {
  background-color: #2980b9; /* Azul más oscuro */
  color: #ecf0f1; /* Un gris claro */
  /* No necesitas volver a declarar 'transition' aquí */
}Lenguaje del código: PHP (php)

Cuando pases el cursor sobre el botón, el background-color y el color del texto cambiarán gradualmente en 0.3 segundos, en lugar de hacerlo de forma instantánea. Si retiras el cursor, la transición también se aplicará en sentido inverso para volver a los estilos originales.