CSS анимация после перетаскивания

Хочу сделать анимацию после перетаскивания. С перетаскиванием проблем нет, просто предположим есть event document.omouseup, чтобы убрать лишний js.

Анимация простая: background стал синим, через секунду вернулся обратно (отсутствие background).

Я вот только не понимаю как это сделать. Ведь просто вставить такое не подойдет:

.color {
    transition-property: background-color;
    transition-duration: 1s;
}

UPD: Вот только что придумал как сделать можно, ниже код. Это самый правильный вариант?

document.omouseup = () => {
  // делаем анимацию
  myElem.style.background = 'blue';
  myElem.classList.add('color');
  myElem.style.background = '';
  // убираем последствия анимации
  setTimeout(() => {
     myElem.classList.remove('color');
  },1000);
}