I have a list of words slider in one line and I want when I hover over the word the animation paused-CodePudding

I have a list of words slider in one line and every client's clickable and open other page and I want when I hover over the word the animation paused temporarily please help me in this?

the exemple

<ul>
      <li className="text">Client</li>
      <li>exemple</li>
      <li className="text">Client</li>
      <li>exemple</li>
      <li className="text">Client</li>
      <li>exemple</li>
    </ul>


 
@keyframes slide {
  0% {transform: translateX(0%);}
  100% {transform: translateX(-180%);}
 }
>div ul{
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style-type: none;
  white-space: nowrap;
  transition: all 1s ease;
  width: 100%;
  animation: slide 20s linear infinite;
}

CodePudding user response：

simply you can pause animation on hover and click's every client text to a new tab

@keyframes slide {
  0% {transform: translateX(0%);}
  100% {transform: translateX(-180%);}
 }
ul{
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style-type: none;
  white-space: nowrap;
  transition: all 1s ease;
  width: 100%;
  animation: slide 20s linear infinite;
}
ul:hover{
  -webkit-animation-play-state:paused;
  -moz-animation-play-state:paused;
  -o-animation-play-state:paused;
  animation-play-state:paused;
  cursor: pointer;
}

<ul>
  <li><a href="www.google.com" target="_blank" className="text">Client</a></li>
  <li>exemple</li>
  <li className="text"><a href="www.google.com" target="_blank">Client</a></li>
  <li>exemple</li>
  <li className="text"><a href="www.google.com" target="_blank">Client</a></li>
  <li>exemple</li>
</ul>