CSS animation after dragging

I want to make an animation after dragging. There are no problems with dragging, just assume there is an event document.omouseup to remove the extra js.

The animation is simple: the background turned blue, a second later it came back (no background ).

I just do not understand how to do it. After all, just insert this will not work:

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

UPD: I’ve just figured out how to do it, below code. Is this the most correct option?

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