title: CSS3 Animations and IE11 don't work in html file but on jsfiddle fine
body: <p>I'm trying to figure out why <code>css3</code> animations aren't working in my local website in <strong>Internet Explorer (10)</strong>. In any other browser everything is fine (Chrome, Firefox).
  Read a lot about scoping issues in <strong>ie</strong> with media queries and so on. So I tried to reduce the source of errors by removing anything out of the html page except a <code>div</code> container and the <code>css</code> declarations which should apply the animation. On trying to find the issue I created a <a href="http://jsfiddle.net/kjo3h0xk/" rel="nofollow">fiddle</a> and was surprised that it was working there!?!.</p>
  
  <p>So thinking about the differences I only found a <code>style</code> tag on example page  instead of linking to an external css file. But putting css into an external file was without success too.</p>
  
  <p>Don't know else what I should look for.</p>
  
  <p>Here's the html code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=9"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;style type="text/css"&gt;
      @-webkit-keyframes scaleUpDown {
          from {
              -webkit-transform: scale(1);
              transform: scale(1);
          }
          to {
              -webkit-transform: scale(1.5);
              transform: scale(1.5);
          }
      }
  
      @keyframes scaleUpDown {
          from {
              -webkit-transform: scale(1);
              /*-ms-transform: scale(1);*/
              transform: scale(1);
          }
          to {
              -webkit-transform: scale(1.5);
              /*-ms-transform: scale(1.5);*/
              transform: scale(1.5);
          }
      }
  
      div.scaling {
          width: 100px;
          height: 100px;
          position: absolute;
          display: block;;
          left: 100px;
          top: 100px;
          background-color: #00f;
          z-index: 1;
          background-size: 100% auto;
          -webkit-animation-duration: 30s;
          animation-duration: 30s;
          -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
          -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
          -webkit-animation-name: scaleUpDown;
          animation-name: scaleUpDown;
          -webkit-animation-direction: alternative;
          animation-direction: alternative;
          -webkit-transform-origin: bottom center 50%;
          -ms-transform-origin: bottom center 50%;
          transform-origin: bottom center 50%;
      }
  &lt;/style&gt;
  &lt;div class="scaling"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>