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

Question

我正在尝试使用以下 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）：

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

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

如何同步所有矩形对象的动画同时发生？ IE。每当 rect 的类发生更改时，每个 rect 动画的开始时间都是相同的，而不是发生更改时。

Answer 1

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

像这样 -> jsfiddle

<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;
    }
}