使用CSS同步SVG元素中的动画

我尝试使用以下CSS创建一个简单的闪烁SVG元素：

.led-red-blink {
    animation-name: grey-red;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    stroke-width: 1;
    stroke: #808080;
}
.led-red-blink:hover {
    animation-name: grey-red;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    stroke-width: 1;
    stroke: #efefef;
}

@keyframes grey-red {
    0% { fill: #808080; }
    50% { fill: #EE5544; }
    100% { fill: #808080; }
}
.led-green-blink {
    /* just like led-red-blink */
}

以及UI元素（为清晰起见，删除了宽度、高度、x、y）：

动画本身工作正常，但如果我将led红色闪烁类指定给另一个rect对象，它们会闪烁不同步。 rects的类可以随时更改

---

如何同步所有rect对象的动画以同时发生？即，无论何时更改rect的类，每个rect动画的开始时间都是相同的，而不是更改的时间。

将svg元素分组到g标记中，为其分配一个类，并使用该类应用动画

像这样->

g、 圈{
-webkit动画：移动3s线性无限；
}
@-webkit关键帧移动{
0%{
不透明度：1；
}
100%{
不透明度：0；
}
}

感谢您提供的解决方案。我唯一的问题是，与在两个特定外观之间切换相反，对象会出现和消失。我通过先添加背景图像解决了这个问题，但这需要两个对象。有更好的解决方案吗？您可以使用jQuery在g元素上切换动画类，而不是我以前的解决方案。这可能是一个更好的解决方案。当我到达我的pc并返回给您时，我将准备一个JSFIDLE:）请查看此注释，我们需要在将类归因于svg元素时使用attr。代码的setTimeout部分“重置”动画，以便可以多次运行。

<rect class="led-red-blink" id="led-h1"></rect>
<rect class="led-green" id="led-ok"></rect>

<svg height="100" width="300">
    <g class="circles">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    <circle cx="200" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </g>
</svg>

g.circles {
    -webkit-animation: move 3s linear infinite;
}
@-webkit-keyframes move {
    0%{
        opacity:1;
    }
    100%{
        opacity:0;
    }
}