Проблемы с transition CSS

парни, добрый вечер (объясню словами что хочу и ниже будет код) есть в общем-то такой код, где при нажатии кнопки редактировать могу менять один текст, далее отменить или сохранить (по кнопке save). при нажатии save, к контейнеру с текстом применяется два стиля - text-shadow и border. это отдельный класс стилей (.active называется). через две секунды эти отменяются. все работает как должно, но есть проблема одна - не работает плавное возвращение к тем стилям как было. при появлении стилей плавность есть, но когда я убираю - нет. вот js код:

descriptionText.classList.add("active");
setTimeout(() => {
descriptionText.classList.remove("active");
}, 2000);

вот как выглядит css:

.description-text {
    margin: 20px;
    font-family: "AllText2", sans-serif;
    color: white;
    font-size: 19px;
    transition: text-shadow 500ms, color 500ms;
}

.active {
    text-shadow: 0px 0px 10px green, 0px 0px 10px green;
    color: green;
    transition: text-shadow 500ms, color 500ms;
}

в чем моя ошибка? вроде везде есть transition