Svg動畫不工作在Firefox - 在鉻，歌劇工作

Question

我使用下面的代碼svg動畫它完全在鉻和歌劇工作，但它不工作在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; 
    } 
} 

加一爲要支持任何其他瀏覽器。