Muchas veces queremos cambiar alguna propiedad de CSS cuando ocurre algun evento determinado (por ejemplo, hover). Desde CSS3 se nos permite poder animar esa transición entre la propiedad por default que asignamos y la propiedad que ocurre en ese elemento. Eso es llamado una transición. Veamoslo con ejemplos practicos para poder entenderlo mejor

Tenemos el siguiente elemento

Creado de la siguiente manera

div{
  width:200px;
  height:200px;
  background-color:black;
  color:red;
  display:flex;
  align-items:center;
}

p{
  text-align:center;
  margin:0 20px;
}

Cuando haga hover queremos que los colores se inviertan, es decir, que el fondo sea rojo y el texto negro

div:hover{
  background-color:red;
  color:black;
}

De esta forma ya hemos configurado el efecto que hará cuando pasemos el mouse por arriba, pero ahora queremos que haya una transición en este elemento. Entra en juego la propiedad transition en este caso. La misma tiene la siguiente sintaxis basica

transition: background-color 3s linear 1s

Que propiedad se cambiará

Cuanto durará la transición

Modificamos como progresa la transición en el tiempo que dura (identico a animation-timing-function)

Cuanto delay habrá en la transición (opcional)

Ahora apliquemoslo a nuestro caso. Queremos que lo que cambie sea el color de fondo, que la transición dure 3 segundos y que su velocidad sea lineal.

div{
  width:200px;
  height:200px;
  background-color:black;
  color:red;
  display:flex;
  align-items:center;
	transition:background-color 3s linear;
}

p{
  text-align:center;
  margin:0 20px;
}

div:hover{
  background-color:red;
  color:black;
}