title: CSS3 animation not working IE9
body: <p>I want to create JSFiddle for animation. My animation not supported in IE9. Any suggestion.</p>
  
  <p><a href="http://jsfiddle.net/fJxsV/" rel="nofollow">http://jsfiddle.net/fJxsV/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="style2.css" media="screen" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="container"&gt;
      &lt;div id="button"&gt;Hover here!&lt;/div&gt;
      &lt;div id="globe_small"&gt;&lt;/div&gt;
      &lt;div id="globe_large"&gt;&lt;/div&gt;
      &lt;div id="globe_hands"&gt;&lt;/div&gt;
      &lt;div id="globe_background"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  #container{position:relative;width:500px;}
  #button {position:absolute;width:300px;background-color:pink;top:420px;z-index:5;    margin:0 auto;text-align:center;padding-top:15px; padding-bottom:15px;color:#fff;      text-transform:uppercase;font-weight:bold;left:90px;}
  #globe_background{background:red;width:494px;height:397px;z-index:1;position:absolute; top:0;}
   #globe_hands{background:blue;width:295px;height:129px;z-index:3;top:265px;      left:96px;position:absolute;}
  #globe_small {background:green;height:160px;width:160px;position:absolute;       left:165px;top:185px;z-index:4;-webkit-transition-duration: 0.8s;-moz-transition-duration: 0.8s; -o-transition-duration: 0.8s;transition-duration: 0.8s;-ms-transition-duration: 0.8s; -webkit-transition-property: -webkit-transform;-moz-transition-property: -moz-transform; transition-property: -o-transform;transition-property: transform;-ms-transition-property: transform;    
  }
  #button:hover ~ #globe_large{
      -webkit-animation-name: spin;  
      -webkit-animation-iteration-count: infinite;  
      -webkit-animation-timing-function: linear;  
      -webkit-animation-duration: 1s;
  
      -moz-animation-name: mozspin;  
      -moz-animation-iteration-count: infinite;  
      -moz-animation-timing-function: linear;  
      -moz-animation-duration: 1s;
  
      -o-animation-name: ospin;  
      -o-animation-iteration-count: infinite;  
      -o-animation-timing-function: linear;  
      -o-animation-duration: 1s;
  
      -ms-animation-name: msspin;  
      -ms-animation-iteration-count: infinite;  
      -ms-animation-timing-function: linear;  
      -ms-animation-duration: 1s;
  
      animation-name: nospin;  
      animation-iteration-count: infinite;  
      animation-timing-function: linear;  
      animation-duration: 1s;
  }
  
  @-webkit-keyframes spin {  
  from {  
      -webkit-transform: rotate(0deg);  
  }  
  to {  
      -webkit-transform: rotate(360deg);  
      }  
  }
  @-moz-keyframes mozspin {  
  from {  
      -moz-transform: rotate(0deg);  
  }  
  to {  
      -moz-transform: rotate(360deg);  
      }  
  }    
  @-o-keyframes ospin {  
  from {  
      -moz-transform: rotate(0deg);  
  }  
  to {  
      -moz-transform: rotate(360deg);  
      }  
  }   
  @keyframes nospin {  
  from {  
      transform: rotate(0deg);  
  }  
  to {  
      transform: rotate(360deg);  
      }  
  }
  @keyframes msspin {  
  from {  
      transform: rotate(0deg);  
  }  
  to {  
      transform: rotate(360deg);  
      }  
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/fJxsV/" rel="nofollow">http://jsfiddle.net/fJxsV/</a></p>