Jquery 如何在不刷新的情况下应用CSS动画

我正在使用CSS动画和jQuery实现一个段落

单击时应用此CSS动画，然后返回原始文本。第二次单击时，动画不起作用。我必须刷新它才能更新

我想实现这个CSS的动画，这样我就不必在一次点击事件后刷新

不必要的代码是缩写的。 这就是我到目前为止所做的：

$（文档）.ready（函数（）{
$（'intro_bullet'）。单击（函数（）{
$（'#intro span'）.addClass（'animation'）；
});
});
。动画{
动画名称：颜色变化；
动画持续时间：5s；
动画迭代次数：2次；
动画方向：交替；
}
@-webkit关键帧颜色变化{
来自{color:#333386；}
至{颜色：白色；}
}


介绍

关于介绍的段落
试试：

尝试：

您必须首先删除该类，然后使用
offsetWidth
进行黑客攻击，您可以使用该攻击“重置”div，以便动画可以再次运行。了解更多信息


$（文档）.ready（函数（）{
$（'intro_bullet'）。单击（函数（）{
$（'intro span'）.removeClass（'animation'）；
void$（'#intro span'）[0]；
$（'#intro span'）.addClass（'animation'）；
});
});
。动画{
动画名称：颜色变化；
动画持续时间：5s；
动画迭代次数：2次；
动画方向：交替；
}
@关键帧颜色改变{
来自{color:yellow；}
至{颜色：皇家蓝；}
}


介绍
单击此处

关于介绍的段落
您必须先删除该类，然后使用
offsetWidth
进行黑客攻击，您可以使用该攻击“重置”div，以便动画可以再次运行。了解更多信息


$（文档）.ready（函数（）{
$（'intro_bullet'）。单击（函数（）{
$（'intro span'）.removeClass（'animation'）；
void$（'#intro span'）[0]；
$（'#intro span'）.addClass（'animation'）；
});
});
。动画{
动画名称：颜色变化；
动画持续时间：5s；
动画迭代次数：2次；
动画方向：交替；
}
@关键帧颜色改变{
来自{color:yellow；}
至{颜色：皇家蓝；}
}


介绍
单击此处

关于介绍的段落
非常感谢您的回答。我会处理的。非常感谢你的回答。我会处理的。非常感谢你的回答。多亏了你，我才解决了这个问题。我想向你们学习更多关于“offsetWidth”的知识。“offsetWidth”到底是什么意思？无论如何，非常感谢：）老实说，我不太清楚为什么需要
offsetWidth
，但确实如此（请参阅我发布的链接）
offsetWidth
的主要用途是获取元素的宽度（以像素为单位）。我的猜测是，它迫使该元素重新绘制DOM。我理解。谢谢！：）非常感谢你的回答。多亏了你，我才解决了这个问题。我想向你们学习更多关于“offsetWidth”的知识。“offsetWidth”到底是什么意思？无论如何，非常感谢：）老实说，我不太清楚为什么需要
offsetWidth
，但确实如此（请参阅我发布的链接）
offsetWidth
的主要用途是获取元素的宽度（以像素为单位）。我的猜测是，它迫使该元素重新绘制DOM。我理解。谢谢！：）
animation-iteration-count: infinite;