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＆＃39;班级可以随时更改。

如何同步所有rect对象的动画？即每当更改一个rect类时，每个rect动画的开始时间都是相同的，而不是每当进行更改时。

Answer 1

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

像这样 - ＆gt; 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;
    }
}

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

1 个答案: