Eu tenho o seguinte exemplo 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;
}

Então, eu tenho um DIV com.message classe, e pressionando um botão, eu adiciono a classe.unreadMessage, e pressionando outro botão, eu removê-lo.

Com este exemplo, toda vez que eu mudobackground-color, adicionando ou removendo.unreadMessage, faz a transição do CSS.

O que eu quero fazer é, se possível, ter uma mudança de cor instantânea quando eu adicionar.unreadMessage, e tem a transição apenas quando removê-lo.

A primeira coisa que veio em minha mente, foi ter uma classe diferente contendo as propriedades de transição do CSS e adicioná-lo após adicionar.unreadMessage.

Mas é possível fazer isso com apenas uma classe ou usando uma solução alternativa de JavaScript?