What is the way to slow down the CSS animation and make it stop when hovering, but allow it to continue moving infinitely once the mouse leaves?

edit

You can slow down the CSS animation using the "animation-duration" property and add the "animation-play-state" property to pause it when hovering. To allow it to continue moving infinitely once the mouse leaves, you can set the "animation-play-state" property back to "running". Here is an example code:

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: slide 5s infinite;
}

div:hover {
  animation-play-state: paused;
}

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(200px); }
}

In this example, the animation will slide the blue div from left to right in 5 seconds and repeat infinitely. Then, when hovering the div, the animation will pause, but once the mouse leaves, the animation will resume from where it left off.

You can adjust the duration time and animation styles to fit your needs.