2个css动画调用1个元素

为什么动画仅在元素出现时工作，而在您悬停时不工作

正文{
文本对齐：居中；
填充顶部：50px；
字体系列：无衬线；
}
跨度{
背景：道奇蓝；
边界半径：4px；
填充：10px 20px；
动画名称：脉冲；
动画持续时间：2秒；
动画迭代次数：4次；
动画延迟：3s；
}
跨度：悬停{
动画名称：脉冲；
动画持续时间：2秒；
动画迭代次数：1；
动画延迟：.2s；
}
@关键帧脉冲{
0% {
长方体阴影：0像素减淡蓝色
}
50% {
长方体阴影：0 20px透明
}
100% {
长方体阴影：0像素透明
}
}

试验

您只需将动画恢复到正常状态即可

body {
  text-align: center;
  padding-top: 50px;
  font-family: sans-serif;
}
span {
  background: dodgerblue;
  border-radius: 4px;
  padding: 10px 20px;
}
span:hover {
  animation-name: pulse;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-delay: .2s;
}
@keyframes pulse {
  0% {box-shadow: 0 0 0 0px dodgerblue}
  50% {box-shadow: 0 0 0 20px transparent}
  100% {box-shadow: 0 0 0 0px transparent}
}

---

您有几个选择：

复制动画

正文{
文本对齐：居中；
填充顶部：50px；
字体系列：无衬线；
}
跨度{
背景：道奇蓝；
边界半径：4px；
填充：10px 20px；
动画名称：脉冲；
动画持续时间：2秒；
动画迭代次数：4次；
动画延迟：3s；
}
跨度：悬停{
动画名称：pulse2；
动画持续时间：2秒；
动画迭代次数：1；
动画延迟：.2s；
}
@关键帧脉冲{
0% {
长方体阴影：0像素减淡蓝色
}
50% {
长方体阴影：0 20px透明
}
100% {
长方体阴影：0像素透明
}
}
@关键帧脉冲2{
0% {
长方体阴影：0像素减淡蓝色
}
50% {
长方体阴影：0 20px透明
}
100% {
长方体阴影：0像素透明
}
}

试验

这是否适合您的回答：谢谢。我认为使用复制选项更好。@IvanU，很乐意帮忙。根据规范，一个动画不能使用两次吗？@IvanU，一个动画可以在同一元素上使用多次，如果它的

动画播放状态将在悬停时重置。当动画播放完后，它的状态是
停止
，我不确定是否可以仅使用CSS将其重置为悬停状态。这就是我提出上述选项的原因。