CODEWITHSUNDEEP
javascripthtmlcsscss-animations
DerpyNerd
DerpyNerd

Reputation: 4803

CSS3 keyframe fade-in and -out animation not working on IE

The keyframes are as basic as they come.

.fadeIn {  
    animation: fadeIn 500ms linear 0s 1 normal forwards running; /* Modern browsers */
}
.fadeOut {
    animation: fadeOut 150ms linear 0s 1 normal forwards running; /* Modern browsers */
}

/* Modern browsers */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

The keyframes work in all other browsers, even for mobile browsers. I omitted the prefixes for other browsers (-webkit, -moz, -o).

Why is IE pulling my chain, again?! It's not working in all compatible (IE 10+) version of IE.

Here is the JSFiddle

Upvotes: 1

Views: 2497

Answers (1)

Asons
Asons

Reputation: 87251

It appears IE does not like having the animation-play-state value in the shorthand, so split them

Src: https://msdn.microsoft.com/en-us/library/hh772212(v=vs.85).aspx

.fadeIn {  
    animation-play-state: running;
    animation: fadeIn 500ms linear 0s 1 normal forwards;
}
.fadeOut {
    animation-play-state: running;
    animation: fadeOut 150ms linear 0s 1 normal forwards;
}

Stack snippet

function fadeOut(e) {
    var div = document.getElementById('fading');
    div.classList.remove('fadeInit');
    div.classList.remove('fadeIn');
    div.classList.add('fadeOut');
}

function fadeIn() {
    var div = document.getElementById('fading');
    div.classList.remove('fadeInit');
    div.classList.remove('fadeOut');
    div.classList.add('fadeIn');
}

fadeIn();
setTimeout(function() {
	fadeOut();
}, 1000);
/****************
* ANIMATIONS    *
****************/
/* Animation initializer */
.fadeIn {  
    animation-play-state: running;
    animation: fadeIn 500ms linear 0s 1 normal forwards; /* Modern browsers */
}
.fadeOut {
    animation-play-state: running;
    animation: fadeOut 150ms linear 0s 1 normal forwards; /* Modern browsers */
}

/* IE 10 / Chrome */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
<div id="fading" style="background: black; width: 100px; height: 100px" />

Upvotes: 4

Related Questions