title: Svg animation not working in Firefox - working in chrome, opera
body: <p>I am using the following code for svg animation it is perfectly working in chrome and opera , but its not working in Mozilla Firefox.</p>
  
  <p>Note that all my browsers are updated. </p>
  
  <p>
  
  
  </p>
  
  <pre><code> &lt;defs&gt;
  &lt;style type="text/css"&gt;
  
      .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;
      &lt;!--    fill-opacity:0.0;--&gt;
      }
              #logo.clickit .st1 {
          fill:#20b21f;
          stroke: #20b21f;
          stroke-opacity:0.0;
      &lt;!--    fill-opacity:0.0;--&gt;
      }
          #logo.clickit .st2 {
          fill:#282828;
          stroke: #282828;
          stroke-opacity:0.0;
      &lt;!--    fill-opacity:0.0;--&gt;
      }
  
      @-webkit-keyframes dash {
          from {
              stroke-dashoffset: 2000;
          }
          to {
              stroke-dashoffset: 0;
          }
      }
  
  
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  
      var clicker = document.querySelector('#logo');
  
  clicker.addEventListener('click', function() {
  
          this.classList.toggle('clickit');
  
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>
  
  </p>
  
  <p>
  
  
  
  
  
  
  
  
  
  
  
  
  
  </p>
  
  <p>
  
  </p>
  
  <p></p>
  
  <p>I am using the following code for svg animation it is perfectly working in chrome and opera , but its not working in Mozilla Firefox.</p>
  
  <p>Note that all my browsers are updated. </p>