CSS Transition is not working for IE11

Question

I am trying to make the sticky footer to fade in from top and fade out to bottom. My code seems to work perfectly fine for Google Chrome, Firefox, etc. But it is not working at all for IE11. Below is my code for CSS. Does anyone know how to solve this issue?

 .sticky-footer-show { overflow-y: hidden; -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); transition-timing-function: cubic-bezier(0, 1, 0.5, 1); -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; } //.sticky-footer-show .sticky-footer-remove { -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); transition-timing-function: cubic-bezier(0, 1, 0.5, 1); -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; height: 0; } //.sticky-footer-remove 

Answer 1

You might be looking for the -ms- prefix

But it should also work with just transition according this answer CSS3 + Javascript - Will -ms-transition:opacity 1s ease-in-out; work in IE 10 alone?

But internet explorer being internet explorer there might be something hindering it.

 .sticky-footer-show { overflow-y: hidden; -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); -ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); transition-timing-function: cubic-bezier(0, 1, 0.5, 1); -webkit-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } //.sticky-footer-show .sticky-footer-remove { -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); -ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); transition-timing-function: cubic-bezier(0, 1, 0.5, 1); -webkit-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s; height: 0; } //.sticky-footer-remove 

Have you tried using it all in the transition command?

 .sticky-footer-show, .sticky-footer-remove {
    -webkit-transition: transform 1s cubic-bezier(0, 1, 0.5, 1);
         -o-transition: transform 1s cubic-bezier(0, 1, 0.5, 1);
        -ms-transition: transform 1s cubic-bezier(0, 1, 0.5, 1);
            transition: transform 1s cubic-bezier(0, 1, 0.5, 1);
 }
 .sticky-footer-remove {
       height: 0;
 }

Advice: Don't try to support IE11 with fancy graphic dodas. Let them have the quick move to other state but have your webpage functional. IE11 will be used by now that half the internet is broken and move on to chrome/firefox/edge at some point.