css - Svg 动画在 Firefox 中不起作用 - 在 chrome、opera 中工作

Question

我将以下代码用于 svg 动画，它在 chrome 和 opera 中完美运行，但在 Mozilla Firefox 中不起作用。

请注意，我所有的浏览器都已更新。

 <defs>
<style type="text/css">

    .st0{fill:#fff;;stroke:#282828;stroke-width:3;stroke-miterlimit:5;transition: .8s;}

    .st0 {
        stroke-dasharray: 2000;
        stroke-dashoffset:0;
        -webkit-animation: dash 4s linear forwards;
        -o-animation: dash 4s linear forwards;
        -moz-animation: dash 4s linear forwards;
        animation: dash 4s linear forwards;
    }

    .st2{fill:#fff;;stroke:#282828;stroke-width:2;stroke-miterlimit:5;transition: .8s;}

    .st2 {
        stroke-dasharray: 2000;
        stroke-dashoffset:0;
        -webkit-animation: dash 4s linear forwards;
        -o-animation: dash 4s linear forwards;
        -moz-animation: dash 4s linear forwards;
        animation: dash 4s linear forwards;
    }

        .st1{fill:#fff;;stroke:#20b21f;stroke-width:3;stroke-miterlimit:5;transition: .8s;}

    .st1 {
        stroke-dasharray: 2000;
        stroke-dashoffset:0;
        -webkit-animation: dash 4s linear forwards;
        -o-animation: dash 4s linear forwards;
        -moz-animation: dash 4s linear forwards;
        animation: dash 4s linear forwards;
    }

    #logo {
    cursor:pointer;
    }

    #logo:hover .st0 {
        fill:#282828;
        stroke: #282828;
        transition: .8s;
        stroke-opacity:0.0;
    }

        #logo:hover .st1 {
        fill:#20b21f;
        stroke: #20b21f;
        transition: .8s;
        stroke-opacity:0.0;
    }

        #logo:hover .st2 {
        fill:#282828;
        stroke: #282828;
        transition: .8s;
        stroke-opacity:0.0;
    }

    #logo.clickit .st0 {
        fill:#282828;
        stroke: #282828;
        stroke-opacity:0.0;
    <!--    fill-opacity:0.0;-->
    }
            #logo.clickit .st1 {
        fill:#20b21f;
        stroke: #20b21f;
        stroke-opacity:0.0;
    <!--    fill-opacity:0.0;-->
    }
        #logo.clickit .st2 {
        fill:#282828;
        stroke: #282828;
        stroke-opacity:0.0;
    <!--    fill-opacity:0.0;-->
    }

    @-webkit-keyframes dash {
        from {
            stroke-dashoffset: 2000;
        }
        to {
            stroke-dashoffset: 0;
        }
    }


</style>

<script type="text/javascript">

    var clicker = document.querySelector('#logo');

clicker.addEventListener('click', function() {

        this.classList.toggle('clickit');

    });

</script>

我将以下代码用于 svg 动画，它在 chrome 和 opera 中完美运行，但在 Mozilla Firefox 中不起作用。

请注意，我所有的浏览器都已更新。

Answer 1

您似乎有一个针对 webkit 的 @-webkit-keyframes 定义，但没有针对任何其他浏览器的定义。

尝试添加

@keyframes dash {
    from {
        stroke-dashoffset: 2000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

以及您想要支持的任何其他浏览器。