Javascript 如何在内圈分区内停止webkit动画？

我有五个嵌套的圆div，我想给它们pulse动画。我还有一个文本容器，它在第五个div上，因此当我给第一个外圆css动画类时，它适用于所有嵌套的圆，我不希望它应用于我的文本容器

不幸的是，我无法更改myText div的位置，因为当我更改它时，重新定位它将是一个非常大的问题。由于版权问题，我无法准确地共享我的项目的真实示例。我应该在不更改其位置的情况下找到一个解决方案。还有其他方法吗

我尝试了下面的方法，但没有成功，因为我无法操纵内圈内的动画

.myText{ animation-play-state: paused;}

#第一个圆{边界半径：50%；宽度：643px；高度：643px；位置：绝对；顶部：0；左侧：0；边界：1px实心#000；-webkit动画：脉动1s缓解；-webkit动画迭代计数：无限；}
#第二个圆{位置：绝对；边框半径：50%；边框：1px实心#000；宽度：508px；高度：508px；顶部：50%；左侧：50%；边距：-254px 0-254px}
#第三个圆{位置：绝对；宽度：382px；高度：382px；边框：1px实心#000；边框半径：50%；顶部：50%；左侧：50%；边距：-191px 0-191px}
#第四个圆{位置：绝对；宽度：254px；高度：254px；边框：1px实心#000；边框半径：50%；顶部：50%；左侧：50%；边距：-127px 0-127px}
#第五个圆{位置：绝对；字体大小：14px；宽度：128px；高度：128px；文本对齐：中心；边框：1px实心#000；边框半径：50%；顶部：50%；左侧：50%；边距：-64px 0-64px}
.myText{
边缘顶部：55px；
}
@-webkit关键帧脉动{
0%{-webkit变换：比例（0.1,0.1）；不透明度：0.0；}
50%{不透明度：1.0；}
100%{-webkit变换：比例（1.2,1.2）；不透明度：0.0；}
}

我的文字

使用较少的元素使其与众不同

.box{
利润率：150像素；
显示：内联块；
位置：相对位置；
}
.盒子：以前{
内容：“；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：500%；
填充顶部：500%；
边框：2倍实心；/*1圈*/
边界半径：50%；
/*这里有三圈*/
背景：
径向梯度（最远侧，透明75%，#000钙（75%+1px）钙（75%+2px），透明钙（75%+3px）），
径向梯度（最远侧，透明50%，#000钙（40%+1px）钙（50%+2px），透明钙（50%+3px）），
径向梯度（最远侧，透明25%，#000钙（25%+1px）钙（25%+2px），透明钙（25%+3px））
/*添加另一个圆
径向梯度（最远侧，透明X%，#000钙（X%+1px）钙（X%+2px），透明钙（X%+3px））*/；
动画：脉动1s线性无限；
}
@关键帧跳动{
0% {
转换：转换（-50%，-50%）比例（0.1）；
不透明度：0；
}
50% {
不透明度：1；
}
100% {
转换：转换（-50%，-50%）比例（1.2）；
不透明度：0；
}
}

一些文本

使用较少的元素使其与众不同

.box{
利润率：150像素；
显示：内联块；
位置：相对位置；
}
.盒子：以前{
内容：“；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：500%；
填充顶部：500%；
边框：2倍实心；/*1圈*/
边界半径：50%；
/*这里有三圈*/
背景：
径向梯度（最远侧，透明75%，#000钙（75%+1px）钙（75%+2px），透明钙（75%+3px）），
径向梯度（最远侧，透明50%，#000钙（40%+1px）钙（50%+2px），透明钙（50%+3px）），
径向梯度（最远侧，透明25%，#000钙（25%+1px）钙（25%+2px），透明钙（25%+3px））
/*添加另一个圆
径向梯度（最远侧，透明X%，#000钙（X%+1px）钙（X%+2px），透明钙（X%+3px））*/；
动画：脉动1s线性无限；
}
@关键帧跳动{
0% {
转换：转换（-50%，-50%）比例（0.1）；
不透明度：0；
}
50% {
不透明度：1；
}
100% {
转换：转换（-50%，-50%）比例（1.2）；
不透明度：0；
}
}

一些文本

因此，您只需要最外层的圆就可以为其他4个圆设置脉冲动画？我只想暂停myText div所以您只需要最外层的圆就可以为其他4个圆设置脉冲动画？我只想暂停myText div