vamos a utilizar la funcion transition.
Con esta funcion le decimos que alla una trancision cuando se apliquen a alguna propiedad

transition-property: background;

Aqui le decimos que se aplique una trancision a la propiedad background.

transition-duration: 1s;

Aqui le decimos a la caja que va a ver una trancision de 1 segundo.

El cambio de color lo hacemos con hover asi:

.caja:hover{background-color: aqua;}

transition-delay

Con la propiedad transition delay hacemos que el se tarde en mostrar el transition ejemplo aqui 2 segundos
transition-delay: 2s;

transition-timing-function

Con la propiedad transition-timing-function:
Todas llegan al mismo tiempo la diferencia es que unas son mas rapidas que otras y las que estan apunto de llegar diminuyen su velocidad para llegar al 3 segundo.