在 CSS 动画属性中转换 SVG 动画属性

Question

我有SVG不透明度动画属性：

<animate id="animation1"
attributeName="opacity"
from="1"
to="0"
dur="1s"
begin="0.5s;animation2.end" />
<animate id="animation2"
attributeName="opacity"
from="0"
to="1"
dur="2s" 
begin="animation1.end" />

我需要与我尝试过的 css3 中的相同属性：

.opacity-animation{
-webkit-animation-name: flickerAnimation;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 0.5s;
}
@keyframes flickerAnimation {
0%   { opacity:1; }
50%  { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
0%   { opacity:1; }
50%  { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
0%   { opacity:1; }
50%  { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
0%   { opacity:1; }
50%  { opacity:0; }
100% { opacity:1; }
}

但它不适用于与 SVG 动画相同的工作。 CSS3 代码不透明度循环工作很快。 另请参阅视频，它现在是如何工作的。视频链接

Answer 1

• 第一个 SMIL 动画的持续时间：1s
• 第二个SMIL动画的持续时间：2秒
• 循环总共 3 秒，第一部分为 33%，第二部分为 67%。

此外，插值的SMil标准是linear，而不是一些缓和。

opacity-animation{
animation-name: flickerAnimation;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 0.5s;
}
@keyframes flickerAnimation {
0%   { opacity:1; }
33%  { opacity:0; }
100% { opacity:1; }
}