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

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; } }

Answer 1

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

Answer 2

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.