Tengo el siguiente ejemplo de CSS:

.message{
    background-color: red;
    transition: background-color 5s;
    -webkit-transition: background-color 5s; /* Safari */
    transition-delay: 2s;
    -webkit-transition-delay: 2s; /* Safari */
}

.unreadMessage{
    background-color: blue;
}

Entonces, tengo un DIV con.message clase, y presionando un botón, agrego la clase.unreadMessage, y presionando otro botón, lo quito.

Con este ejemplo, cada vez que cambiobackground-color, añadiendo o eliminando.unreadMessage, hace la transición de CSS.

Lo que quiero hacer es, si es posible, tener un cambio de color instantáneo cuando añado.unreadMessage, y tener la transición solo cuando la elimines.

Lo primero que me vino a la mente fue tener una clase diferente que contenga las propiedades de transición de CSS y agregarla después de agregar.unreadMessage.

¿Pero es posible hacerlo con una sola clase o utilizando una solución alternativa de Javascript?