我想将动画播放状态更改为单击时使用javascript或jquery运行.任何帮助都会得到通知

Question

我想在单击时将动画播放状态更改为从javascript或jquery运行。任何帮助都将不胜感激
运行Word
播放车身{背景：#666；}p{font weight:bold；字体大小：2em；}

.word {
position: relative;
white-space: nowrap;
color: lightblue;
text-shadow: 0 0 3px rgba(0,0,0,1); 
}
.word::after {   // i have doubt here
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
color: red;
overflow: hidden;
width: 40%;
animation: run-text 5s infinite linear;
text-shadow: 0 0 3px rgba(255,255,255,1); 
animation-play-state: ;
}
@keyframes run-text {
from { width: 0 }
to { width: 100% }
}
</style>

Answer 1

您可以分离动画类并使用jQuery添加它。

$('a').click(function() {
$(this).addClass('run-text');
});

.word {
position: relative;
white-space: nowrap;
}
.word::after {
display: none;
content: attr(data-text);
position: absolute;
left: 0;
top: 15px;
color: red;
overflow: hidden;
text-shadow: 0 0 3px rgba(255,255,255,1); 
}
.run-text:after {
display: block;
animation: run-text 1s forwards linear;
}
@keyframes run-text {
from { width: 0 }
to { width: 100% }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="word" data-text="Other Text">Some Text</a>