在 css 动画属性中转换 svg 动画属性答案

【问题标题】：convert svg animation properties in css animation properties在 css 动画属性中转换 svg 动画属性
【发布时间】：2018-10-09 23:13:16
【问题描述】：

我有 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 代码不透明度循环工作迅速。另请参阅视频它现在是如何工作的。 Video Link

【问题讨论】：

标签： css svg css-animations

【解决方案1】：

第一个 SMIL 动画的持续时间：1s
第二个 SMIL 动画的持续时间：2s
循环总共用了 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; }
}

【讨论】：