Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Css3 transform animation doesn't work in IE 11 for a dynamically created element

I have applied CSS3 transform animation to a dynamically created element and it works in Safari,firefox and chrome but not in IE.I have checked the code and css. there is nothing wrong with them.

In IE inspector(Developer tools) animation properties are underlined in red.Don't know what is wrong with this. can someone please help?.

MY CSS

.loadNew {

  -webkit-animation-name: rotate;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;

  -moz-animation-name: rotate;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;

  -o-animation-name: rotate;
  -o-animation-duration: 1s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;


  /* below animation properties are underlined in red in IE inspector */
  animation-name: rotate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;

}

@-webkit-keyframes rotate {

  from {
     -webkit-transform: rotate(0deg);
  }

  to {
     -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotate {

  from {
    -moz-transform: rotate(0deg);
  }

  to {
    -moz-transform: rotate(360deg);
  }
}

@-o-keyframes rotate {

  from {
    -o-transform: rotate(0deg);
  }

  to {
    -o-transform: rotate(360deg);
  }
}

@keyframes rotate {

 from {
   transform: rotate(0deg);
 }

 to {
   transform: rotate(360deg);
 }
}     
like image 559
GMHSJ Avatar asked Dec 15 '14 08:12

GMHSJ


2 Answers

If you’re using keyframes, be sure to place them directly at the top of your external CSS stylesheet.

Example:-

@font-face {
  font-family:'mycoolfont';
  src:url('../fonts/mycoolfont.eot');
  src:url('../fonts/mycoolfont.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/mycoolfont.woff') format('woff'), 
    url('../fonts/mycoolfont.ttf') format('truetype'), 
    url('../fonts/mycoolfont.svg#mycoolfont') format('svg');
  font-weight:normal;
  font-style:normal;
}

/** Keyframes **/
@-webkit-keyframes pulsate {
   0% { box-shadow: 0 0 1px #fff ; }
   100% { box-shadow: 0 0 20px #fff; }
}
@keyframes pulsate {
   0% { box-shadow: 0 0 1px #fff ; }
   100% { box-shadow: 0 0 20px #fff; }
}

a {
   -webkit-animation: pulsate 1.25s infinite alternate;
   animation: pulsate 1.25s infinite alternate;
}

Reference

like image 50
Aditya Singh Avatar answered Nov 15 '22 01:11

Aditya Singh


Well, finally I found the reason why it didn't work in IE. I have placed a meta tag and I changed it as belows.

Before

 <meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1"/>

After

 <meta http-equiv="X-UA-Compatible" content="IE=9;IE=10;IE=Edge,chrome=1"/>


Thanks wiz kid for your quick responce
cheers (Y)

like image 20
GMHSJ Avatar answered Nov 14 '22 23:11

GMHSJ