如何在悬停状态下创建动画图像？

<div class="animation"></div>

.animation {
  width: 100px;
  height: 100px;
  background-color: red;
}

.animation:hover {
  background-color: blue;
}

.animation {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.5s ease;
}

const animation = document.querySelector('.animation');

animation.addEventListener('mouseover', function() {
  animation.style.backgroundColor = 'blue';
});

animation.addEventListener('mouseout', function() {
  animation.style.backgroundColor = 'red';
});