Search code examples
cssinternet-explorer-9

CSS3 animation (keyframes) not working in IE9 and I study solution,Is there a way I can do this without using any prefix or library?

I want run in IE9 or convert to java script & run in IE9!not diffrent

     #div1{
        width:100px;
        height:150px;
        float:left;
       background-color:red;
       animation: mymove 2s infinite;
      -webkit-animation: mymove 2s infinite;
      -webkit-animation-direction: alternate;
      animation-direction: alternate;
       transform-origin: 50% 0%;}

  @keyframes mymove {
      from {transform:rotate(10deg);}to {transform:rotate(-10deg);}
  }
  @-webkit-keyframes mymove {
      from {transform:rotate(10deg);}to {transform:rotate(-10deg);}
  }
Solution

  • It is not supported in IE9.

    Source: http://caniuse.com/#search=keyframe

    Unfortunately, there are very few direct CSS workarounds.

    It is better to do animations with the help of a javascript library as a workaround. An example would be jquery animation effects: http://api.jquery.com/category/effects/