Javascript暂停并恢复文本上的过渡动画

我尝试暂停/恢复文本上的过渡动画。我已经尝试了很多解决类似问题的方法，但仍然没有成功

我想在单击“暂停”按钮时暂停“颜色效果”，当我单击“恢复”按钮时，“颜色效果”将根据休息时间为整个文本着色

这是我的密码

$（文档）.ready（函数（）{
$（'#start'）。在（'单击'，函数（）上）{
$（此）.text（'Resume'）；
$（this.attr（'disabled'，true）；
$（'span'）.addClass（'active'）；
$（'span'）.dequeue（）；
});
$（“#停止”）。单击（函数（）{
$（'#start'）.attr（'disabled'，false）；
$（'#start'）。clearQueue（）；
$（“span”）.stop（）；
/*
*它与下面的类似，
*但仍然不完美。
*当背景位置x的持续时间结束时，
*过渡又开始了，但仍然不完美
*/
/*$（'span'）。设置动画({
“背景位置-x”：“10%”，
“背景位置y”：“20%”
}，10000，‘线性’*/
});
})

正文{
背景：#ccc；
}
跨度{
高度：25px；
背景大小：200%100%；
背景图像：线性渐变（向右，橙色50%，白色50%），线性渐变（向右，透明50%，透明50%）；
文本缩进：28px；
字体大小：30px；
背景大小：200%100%；
背景重复：无重复；
背景位置：100%顶部，100%顶部；
-webkit背景剪辑：文本，边框框；
背景剪辑：文本，边框框；
颜色：透明；
}
.主动{
背景位置：0%顶部，0%顶部；
过渡：背景位置10s；
}

Lorem ipsum dolor sit amet

开始
暂停

使用Jquery切换css

动画播放状态

确保为动画属性添加前缀以实现跨浏览器兼容性（-moz、-webkit等）

片段

$（文档）.ready（函数（）{
$（'#start'）。在（'单击'，函数（）上）{
$（此）.text（'Resume'）；
$（this.attr（'disabled'，true）；
$（'span'）.addClass（'active'）；
$（'span'）.dequeue（）；
});
$（“#停止”）。单击（函数（）{
$（'#start'）.attr（'disabled'，false）；
$（'#start'）。clearQueue（）；
$（'span'）.removeClass（'active'）；
$（'span'）.addClass（'stop'）；
$（“span”）.stop（）；
/*
*它与下面的类似，
*但仍然不完美。
*当背景位置x的持续时间结束时，
*过渡又开始了，但仍然不完美
*/
/*$（'span'）。设置动画({
“背景位置-x”：“10%”，
“背景位置y”：“20%”
}，10000，‘线性’*/
});
})
$（“span”）.on（'animationend webkitAnimationEnd oAnimationEnd'，function（）{
$（“#开始”）.attr（'disabled'，false）；
})

@关键帧动画{
从{
背景位置：自动
}
到{
背景位置：0%顶部，0%顶部；
}
}
身体{
背景：#ccc；
}
跨度{
高度：25px；
背景大小：200%100%；
背景图像：线性渐变（向右，橙色50%，白色50%），线性渐变（向右，透明50%，透明50%）；
文本缩进：28px；
字体大小：30px；
背景大小：200%100%；
背景重复：无重复；
背景位置：100%顶部，100%顶部；
-webkit背景剪辑：文本，边框框；
背景剪辑：文本，边框框；
颜色：透明；
}
.主动{
动画：动漫10s；
动画播放状态：运行！重要；
}
.停下来{
动画：动漫10s；
动画播放状态：暂停；
}

Lorem ipsum dolor sit amet

开始
暂停

哇，太棒了。。！非常感谢你。。。我在另一个解决方案上使用了动画播放状态，但不起作用。现在我知道怎么用了。非常感谢你。