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?
<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;
}
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>