title: CSS animation for SVG in IE10/IE11
body: <p>I have <a href="http://jsfiddle.net/cK4SM/2/" rel="nofollow">this code</a>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg height="100" width="100"&gt;
    &lt;style&gt;
      .svg-circle {
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
      }
      .svg-circle:hover {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
        -webkit-transition: all 0.7s;
        transition: all 0.7s;
      }
    &lt;/style&gt;
    &lt;circle class="svg-circle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It works well in modern browsers. Can I make it works in IE10/IE11? Or I need to use only Javascript?</p>