Css 如何向元素添加两种动画样式

我正在处理这个CSS片段。为什么我不能将pulse和fadeout动画角色添加到span中

从技术上讲，我喜欢在一个动画中同时使用这两种动画，或者允许同时接受pulse和fadeout动画

html，正文{
身高：100%；
宽度：100%；
}
#点{
身高：100%；
宽度：100%；
位置：相对位置；
}
.脉搏{
位置：绝对位置；
利润率：30像素；
显示：块；
宽度：22px；
高度：22px；
边界半径：50%；
背景：#cca92c；
光标：指针；
盒影：0 rgba（204169,44,0.4）；
动画：脉冲2s无限；
}
.脉冲：悬停{
动画：无；
}
@-webkit关键帧脉冲{
0% {
-网络工具包盒阴影：0 rgba（204169,44,0.4）；
}
70% {
-webkit盒阴影：0 10px rgba（204169,44,0）；
}
100% {
-网络工具包盒阴影：0 rgba（204169,44,0）；
}
}
@关键帧脉冲{
0% {
-莫兹盒阴影：0 rgba（204169,44,0.4）；
盒影：0 rgba（204169,44,0.4）；
}
70% {
-moz盒阴影：0 10px rgba（204169,44,0）；
盒影：0 10像素rgba（204169,44,0）；
}
100% {
-莫兹盒阴影：0 rgba（204169,44,0）；
盒影：0 rgba（204169,44,0）；
}
}
希德姆先生{
-webkit动画：向前1.0秒；
-webkit动画迭代计数：1；
-webkit动画延迟：5s；
动画：向前1.0秒；
动画迭代次数：1；
动画延迟：5s；
}
@-webkit关键帧秒{
0% {
不透明度：1；
}
100% {
不透明度：0；
左：-9999px；
}
}
@关键帧秒{
0% {
不透明度：1；
}
100% {
不透明度：0；
左：-9999px；
}
}

---

您正在用.second动画覆盖.pulse动画。您需要在同一关键帧集中包含两个动画，或者在“动画”属性上用逗号分隔关键帧集。或者，您可以使用包装器，将淡出放在包装器上，将脉冲放在实际跨度上。 Css属性不会彼此“堆叠”，它们会被后面的实例所取代，这对于动画也是如此。

.dot{
位置：绝对位置；
利润率：30像素；
显示：块；
宽度：22px；
高度：22px；
边界半径：50%；
背景：#cca92c；
光标：指针；
盒影：0 rgba（204,169,44,0.4）；
不透明度：1；
}
.点--动画{
动画：脉冲2s无限，
隐藏。3s到5s；
}
.dot--动画：悬停{
动画：无；
}
@关键帧脉冲{
0% {
-莫兹盒阴影：0 rgba（204，169，44，0.4）；
盒影：0 rgba（204,169,44,0.4）；
}
70% {
-moz盒阴影：0 10px rgba（204,169,44,0）；
盒影：0 10像素rgba（204，169，44，0）；
}
100% {
-莫兹盒阴影：0 rgba（204,169,44,0）；
盒影：0 rgba（204,169,44,0）；
}
}
@关键帧隐藏{
100% {
不透明度：0；
}
}