Анимируйте прямоугольник, чтобы сделать переход плавным с помощью Javascript

Question

Итак, я делаю пример, чтобы проиллюстрировать разницу между рамкой и рамкой содержимого в CSS.Я установил два блока, и когда я щелкаю один или наведите курсор мыши на другой - класс рамки изменяется на блок содержимого, в результате чего поле становится больше.

Проблема, с которой я столкнулсято, что это происходит внезапно и не радует глаз.Я добавил свойство css -all easy-out 0.5s, но в моем случае оно не работает.

Вот код: https://codepen.io/Elator/pen/rNBoGYJ

У вас есть идеи, как сделатьон кажется более плавным и медленным при наведении или щелчке, когда класс удаляется / добавляется / переключается?Очень признателен.

box2.onmouseenter = function(){
  this.classList.add('box-clicked')
};

box2.onmouseleave = function(){
  this.classList.remove('box-clicked')
};

Лучше, если вы просмотрите мой код в коде, чтобы точно понять, с чем я борюсь.