Javascript 当另一个对象被聚焦时，设置一个对象的动画

我对一个表单有多个部分。每个部分都有一个指示器，指示用户正在执行的步骤。我希望这样，每当一个部分中的输入被聚焦时，它就会在指示器上开始一个动画。我无法在中使用：focus，因为它现在不是浏览器标准

现在我已经将pulse动画保存为悬停效果，但我希望该动画在输入聚焦时开始。我曾想过使用JQuery，但我自己没能弄明白

任何帮助都将不胜感激

@关键帧脉冲{
0%,
40% {
盒影：0 5pxRGBA（0，109，168，0）；
}
0% {
盒影：0像素rgba（0，109，168，0.5）；
}
100% {
盒影：0像素rgba（0，109，168，0）；
}
}
#指示器{
背景色：#006da8；
宽度：25px；
高度：25px；
边界半径：50%；
填充：0；
边缘顶部：15px；
边缘底部：15px；
}
#指示灯：悬停{
动画：无限脉冲；
}
#指标p{
垫面：3件；
保证金：5px；
颜色：白色；
文本对齐：居中；
}
输入{
显示：块；
利润率：10px 0 10px 0；
}
/*我想我想做什么*/
输入：焦点{
/*以某种方式启动指示器动画？？？
也许使用javascript*/
}

一,

二,

三,

将每个部分转换为flexbox。将

指示器定位在输入之后，然后使用
顺序：-1
将其移动到顶部。现在，您可以使用兄弟组合器
输入：focus~.indicator
调用动画


@关键帧脉冲{
0%,
40% {
盒影：0 5pxRGBA（0，109，168，0）；
}
0% {
盒影：0像素rgba（0，109，168，0.5）；
}
100% {
盒影：0像素rgba（0，109，168，0）；
}
}
部分{
显示器：flex；
弯曲方向：立柱；
宽度：50vw；
}
第二节指标{
顺序：-1；
}
.指标{
背景色：#006da8；
宽度：25px；
高度：25px；
线高：25px；
边界半径：50%；
边缘顶部：15px；
边缘底部：15px；
颜色：白色；
文本对齐：居中；
}
输入{
显示：块；
利润率：10px 0 10px 0；
}
输入：焦点~指示器{
动画：无限脉冲；
}

1.
2.
三,

所以，当我最初写这个问题时，我没有包括一个重要的细节。我当时不知道出现此问题时我正在使用的库会自动将所有输入打包到一个div中。我无法删除该库，因为它对项目至关重要。所以我找到了一种方法，就是jQuery，我想我会把它放在这里，以防将来有人需要它


$（文档）.ready（函数（）{
$（'.InputImator'）。焦点（函数（）{
$（this）.closest（'.section'）.find（'.numeric'）.addClass（'pulseAnimator'）；
});
$（'.InputImator'）.blur（函数（）{
$（this）.closest（'.section'）.find（'.numeric'）.removeClass（'pulseAnimator'）；
});
});
表单{
显示器：flex；
弯曲方向：立柱；
}
输入{
宽度：100%；
利润率：10px0；
}
.数字{
宽度：25px；
高度：25px；
边界半径：50%；
背景色：#006da8；
线高：25px；
颜色：白色；
文本对齐：居中；
}
脉冲发生器{
动画：无限脉冲；
}
@关键帧脉冲{
0%,40% {
盒影：0 10px rgba（0，109，168，0）；
}
0% {
盒影：0像素rgba（0，109，168，0.5）；
}
100% {
盒影：0像素rgba（0，109，168，0）；
}
}

1.

2.

3.