Почему transition работает так нестабильно?
Для таких целей нужно использовать событие transitionend, а не setInterval. По твоему сценарию скорее подойдет setTImeout. Но тоже могут возникнуть проблемы.
В твоем примере плохо все. Даже если заменишь setInterval на setTimeout, тебе надо будет еще раз подождать 500мс, что закончилась анимация уменьшения. Значит появится вложенный setTimeout. Выглядит это так себе. Еще у тебя проблема в том, что ты не удаляешь класс у предыдущего элемента. Это значит, что нажав несколько раз подряд, класс будет удален только у последнего. Также тебе надо блокировать выполнение следующей анимации, пока не выполнится первая. 

Транзиции по своему хороши, но конкретно в этом случае лучше использовать анимацию на @keyframes. Получишь больше контроля, не придется привязываться ко времени и что-то колхозить.

snippet