如何自定义开关，使圆圈在颤动中相对较小？

<div class="switch">
  <div class="circle"></div>
</div>

.switch {
  width: 60px;
  height: 30px;
  background-color: #ccc;
  border-radius: 15px;
  position: relative;
  cursor: pointer;
}

.circle {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.5s ease-in-out;
}

.switch.active .circle {
  transform: translateX(30px) translateY(-50%);
}

const switchElement = document.querySelector('.switch');

switchElement.addEventListener('click', function() {
  switchElement.classList.toggle('active');
});