title: SVG transform animation not working in Chrome
body: <p>I'm trying to animate a SVG text element with CSS transforms.
  Everything works like expected in Firefox, but Chrome just shows the text
  with the first keyframe rule applied.</p>
  
  <p>I tried it with the <code>-webkit</code> prefix, but still no luck.</p>
  
  <p><strong>SVG</strong></p>
  
  <pre><code>&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
        width="400px" height="400px" viewBox="0 0 400 400" &gt;
  
      &lt;text class="text-need" fill="#FFFFFF" font-size="136"&gt;Need&lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.text-need {
       font-family: sans-serif;
       animation: slideRight 1s ease-in-out forwards;
  }
  
  @keyframes slideRight {
      0% {
          transform: translate(0rem, 9rem);
      }
      100% {
          transform: translate(25rem, 9rem);
      }
  }
  </code></pre>
  
  <p><a href="http://codepen.io/MoKev/pen/AFdpt?editors=110" rel="nofollow">Codepen</a></p>
  
  <p>It's a little weired because animating a <code>clipPath</code> works fine in Chrome, but won't work in Firefox.</p>
  
  <p><a href="http://codepen.io/MoKev/pen/rJzlp" rel="nofollow">Codepen</a></p>