Css animation doesn't work in internet explorer, changing opacity

Question

Css animation doesn't work in internet explorer, version 11 for sure. All the other browsers animate it perfectly good. Here is a website: http://susannahpryce.esy.es

I checked through firebug in IE, it reads the code with no erroers, so i don't know why it doesn't work, i'm using IE 11.

And here is my code

body .main .header-box {
    background-color: #fff;
    height: 500px;
    width: 100%;
    float: left; }
    body .main .header-box .slide-area {
      margin: 0 9%; }
      body .main .header-box .slide-area #pic1 {
        position: absolute;
        z-index: 5;
        -webkit-animation-duration: 60s;
        -webkit-animation-delay: 10s;
        -webkit-transition-timing-function: ease;
        -webkit-animation-name: slide-fade;
        -webkit-animation-iteration-count: infinite;
        -ms-animation-duration: 60s;
        -ms-animation-delay: 10s;
        -ms-transition-timing-function: ease;
        -ms-animation-name: slide-fade;
        -ms-animation-iteration-count: infinite;
        -moz-animation-duration: 60s;
        -moz-animation-delay: 10s;
        -moz-transition-timing-function: ease;
        -moz-animation-name: slide-fade;
        -moz-animation-iteration-count: infinite; }
      body .main .header-box .slide-area #pic2 {
        position: absolute;
        z-index: 4;
        -webkit-animation-duration: 60s;
        -webkit-animation-delay: 20s;
        -webkit-transition-timing-function: ease;
        -webkit-animation-name: slide-fade;
        -webkit-animation-iteration-count: infinite;
        -ms-animation-duration: 60s;
        -ms-animation-delay: 20s;
        -ms-transition-timing-function: ease;
        -ms-animation-name: slide-fade;
        -ms-animation-iteration-count: infinite;
        -moz-animation-duration: 60s;
        -moz-animation-delay: 20s;
        -moz-transition-timing-function: ease;
        -moz-animation-name: slide-fade;
        -moz-animation-iteration-count: infinite; }
      body .main .header-box .slide-area #pic3 {
        position: absolute;
        z-index: 3;
        -webkit-animation-duration: 60s;
        -webkit-animation-delay: 30s;
        -webkit-transition-timing-function: ease;
        -webkit-animation-name: slide-fade;
        -webkit-animation-iteration-count: infinite;
        -ms-animation-duration: 60s;
        -ms-animation-delay: 30s;
        -ms-transition-timing-function: ease;
        -ms-animation-name: slide-fade;
        -ms-animation-iteration-count: infinite;
        -moz-animation-duration: 60s;
        -moz-animation-delay: 30s;
        -moz-transition-timing-function: ease;
        -moz-animation-name: slide-fade;
        -moz-animation-iteration-count: infinite; }
      body .main .header-box .slide-area #pic4 {
        position: relative;
        z-index: 2; }
  @-webkit-keyframes slide-fade {
  0% {
  opacity: 1; }
  5% {
  opacity: 0; }
  50% {
  opacity: 0; }
  55% {
  opacity: 1; }
  100% {
  opacity: 1; } }
  @-ms-keyframes slide-fade {
  0% {
  opacity: 1; }
  5% {
  opacity: 0; }
  50% {
  opacity: 0; }
  55% {
  opacity: 1; }
  100% {
  opacity: 1; } }
  @-moz-keyframes slide-fade {
  0% {
  opacity: 1; }
  5% {
  opacity: 0; }
  50% {
  opacity: 0; }
  55% {
  opacity: 1; }
  100% {
  opacity: 1; } }

It's great that you have the browser prefixes but you should always include the normal rule. Example `animation-duration: 60s;` — Huangism, Jul 09 '15 at 20:19
As far as I know,IE doesn't use prefixes for animation any more...if ever - http://caniuse.com/#search=css-animation — Paulie_D, Jul 09 '15 at 20:28
Also note `IE10 and IE11 do not support CSS animations inside media queries.` This is in the known issues tab of Paulie_D's link. Your animation for this is inside of media queries. Try to take the animation css out of media query and see if it works. The images does not animate at all for me on IE 11 — Huangism, Jul 09 '15 at 20:29

score 3 · Accepted Answer · answered Jul 09 '15 at 20:40

Take the animation css out of the media query. I did a simple copy and paste and edited the css a little bit to make it work. As stated here http://caniuse.com/#search=css-animation (thanks to Paulie_D) in the known issues tab

IE10 and IE11 do not support CSS animations inside media queries.

http://jsfiddle.net/xmfj0tk7/

  <div class="header-box">
      <div class="slide-area">
         <img id="pic1" src="http://susannahpryce.esy.es/wp-content/themes/sue/pics/hq-1-optimized.jpg" />
         <img id="pic2" src="http://susannahpryce.esy.es/wp-content/themes/sue/pics/hq-2-optimized.jpg" />
         <img id="pic3" src="http://susannahpryce.esy.es/wp-content/themes/sue/pics/hq-3-optimized.jpg" />
         <img id="pic4" src="http://susannahpryce.esy.es/wp-content/themes/sue/pics/hq-4-optimized.jpg" />
      </div>

      <div class="slide-area_480">
      </div>

      <div class="slide-area_640">
      </div>

   </div>

You should also put the normal css rules in your file, as in without prefixes. Modern browsers should not need the prefixes and in the future, the prefixes should go away at some point... for this animation stuff anyway

score 1 · Answer 2 · edited May 23 '17 at 11:51

1

historically IE doesn't apply several styles to elements that don't "have layout."

see: http://www.satzansatz.de/cssd/onhavinglayout.html

Here is a question that was asked regarding opacity in IE.

edited May 23 '17 at 11:51

Community

1
1

answered Jul 09 '15 at 20:20

Olivier Poulin

1,778
8
15

Css animation doesn't work in internet explorer, changing opacity

2 Answers2