title: SVG fill animation returns to initial state
body: <p>I'm using keyframes to change SVG path fill from visible to none-visible.</p>
  
  <p>It working, but when animation ends the path return to his initial color (black), and I want it to remain white.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#secondletter {
    animation-name: col;
    animation-duration: 2s;
    animation-timing-function: ease-in;
  }
  #thirdletter {
    animation-name: col;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
  }
  #fourthletter {
    animation-name: col;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
  }
  
  @keyframes col {
    0% {fill:black}
    100% {fill:#fff}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 1366 768" style="enable-background:new 0 0 1366 768;" xml:space="preserve"&gt;
  &lt;g&gt;
   &lt;path d="M297,293l18.2,68.6c4.2,14.8,7.3,29.4,10.1,43.4h0.8c2.8-14,7.3-28.6,12-43.1l22.4-68.9H381l21,67.8
    c4.8,15.7,9,30.2,12,44.2h0.8c2.2-14,5.9-28.3,10.4-44.2l19.3-67.8h24.4l-44,135.2h-22.4l-20.4-64.7c-4.8-15.1-8.7-28.6-12-44.5
    h-0.6c-3.4,16.2-7.6,30.5-12.3,44.8l-21.8,64.4H313L272.1,293H297z"/&gt;
   &lt;path id="secondletter"  d="M507.3,365c0.6,33.3,21.6,47,46.5,47c17.6,0,28.6-3.1,37.5-7l4.2,17.6c-8.4,3.9-23.5,8.7-45.1,8.7
    c-41.7,0-66.6-27.7-66.6-68.3c0-41.2,24.1-73.1,63.8-73.1c44,0,55.7,38.6,55.7,63.6c0,5-0.6,9-1.1,11.5H507.3z M579.5,347.3
    c0.3-15.4-6.4-39.8-34.2-39.8c-24.9,0-35.8,22.7-37.8,39.8H579.5z"/&gt;
   &lt;path d="M643.4,293l18.2,68.6c4.2,14.8,7.3,29.4,10.1,43.4h0.8c2.8-14,7.3-28.6,12-43.1l22.4-68.9h20.4l21,67.8
    c4.8,15.7,9,30.2,12,44.2h0.8c2.2-14,5.9-28.3,10.4-44.2l19.3-67.8h24.4l-44,135.2h-22.4l-20.4-64.7c-4.8-15.1-8.7-28.6-12-44.5
    h-0.6c-3.4,16.2-7.6,30.5-12.3,44.8l-21.8,64.4h-22.4L618.5,293H643.4z"/&gt;
   &lt;path id="thirdletter" d="M853.7,365c0.6,33.3,21.6,47,46.5,47c17.6,0,28.6-3.1,37.5-7l4.2,17.6c-8.4,3.9-23.5,8.7-45.1,8.7
    c-41.7,0-66.6-27.7-66.6-68.3c0-41.2,24.1-73.1,63.8-73.1c44,0,55.7,38.6,55.7,63.6c0,5-0.6,9-1.1,11.5H853.7z M925.9,347.3
    c0.3-15.4-6.4-39.8-34.2-39.8c-24.9,0-35.8,22.7-37.8,39.8H925.9z"/&gt;
   &lt;path id="fourthletter"  d="M980.2,229.5h24.4v85.1h0.6c8.7-15.1,24.4-24.6,46.2-24.6c33.6,0,57.4,28,57.4,68.9c0,48.4-31.1,72.5-61,72.5
    c-19.6,0-35.3-7.6-45.6-25.2h-0.6l-1.1,22.1h-21.3c0.6-9.2,1.1-23,1.1-34.7V229.5z M1004.6,373.9c0,3.1,0.3,6.2,1.1,9
    c4.8,17.4,19.3,28.8,37,28.8c26,0,41.2-21,41.2-52.1c0-27.2-14-50.4-40.6-50.4c-16.5,0-32.2,11.5-37.2,30.2
    c-0.6,3.1-1.4,6.2-1.4,10.1V373.9z"/&gt;
    
  &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I keep the animation color even when it ends?</p>