Html 我想将动画播放状态更改为单击时使用javascript或jquery运行。任何帮助都是值得的

我想将动画播放状态更改为单击后从javascript或jquery运行。感谢您的帮助。
行话
玩 身体{ 背景:#666； } p{ 字体大小：粗体； 字号：2em； }

.word{
位置：相对位置；
空白：nowrap；
颜色：浅蓝色；
文本阴影：0 3pxRGBA（0,0,0,1）；
}
.word：：在{//之后，我在这里有疑问
内容：attr（数据文本）；
位置：绝对位置；
左：0；
排名：0；
颜色：红色；
溢出：隐藏；
宽度：40%；
动画：运行文本5s无限线性；
文本阴影：0 0 3pxRGBA（255255,1）；
动画播放状态：；
}
@关键帧运行文本{
从{宽度：0}
到{宽度：100%}
}

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

$（'a'）。单击（函数（）{
$（this.addClass（'run-text'）；
});
.word{
位置：相对位置；
空白：nowrap；
}
在…之后{
显示：无；
内容：attr（数据文本）；
位置：绝对位置；
左：0；
顶部：15px；
颜色：红色；
溢出：隐藏；
文本阴影：0 0 3pxRGBA（255255,1）；
}
.运行文本：在{
显示：块；
动画：向前线性运行文本1s；
}
@关键帧运行文本{
从{宽度：0}
到{宽度：100%}
}

一些文字
谢谢您，先生。我可以将动画计时到视频计时吗？如果是，请帮助提交一个新的问题和测试用例，以解决您可能遇到的任何其他问题，如果回答了您的问题，请接受此作为答案。
.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>