Tengo un control deslizante de lista de palabras en una línea y cada cliente puede hacer clic y abrir otra página y quiero que cuando pase el mouse sobre la palabra, la animación se detenga temporalmente, por favor, ¿me ayudan en esto?
<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; }simplemente puede pausar la animación al pasar el mouse y hacer clic en cada texto del cliente en una nueva pestaña
@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>