如何使CSS动画更好地响应鼠标悬停

.element {
  background-color: white;
  transition: background-color 0.3s ease;
}

.element:hover {
  background-color: red;
}

.element {
  animation: rotate 1s infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.element:hover {
  animation-play-state: paused;
}

<div id="element"></div>

<script>
  var element = document.getElementById('element');
  element.addEventListener('mouseover', function() {
    this.style.width = '200px';
    this.style.height = '200px';
  });

  element.addEventListener('mouseout', function() {
    this.style.width = '100px';
    this.style.height = '100px';
  });
</script>