CSS-Animation funktioniert nicht in Internet Explorer, speziell IE9

Question

Hier ist der Code, mit dem ich arbeite. Funktioniert gut in Chrome und Firefox, aber nicht IE und kann nicht herausfinden, was ich falsch mache. Im Grunde ein automatischer Bildschieberegler. In IE bekomme ich nur den ersten IMG ohne zu gleiten.

Jede Hilfe wäre willkommen.

<style type="text/css"> 
@keyframes slidy { 
0% { left: 0%; } 
20% { left: 0%; } 
25% { left: -100%; } 
45% { left: -100%; } 
50% { left: -200%; } 
70% { left: -200%; } 
75% { left: -300%; } 
95% { left: -300%; } 
100% { left: -400%; } 
} 

@-webkit-keyframes slidy { 
0% { left: 0%; } 
20% { left: 0%; } 
25% { left: -100%; } 
45% { left: -100%; } 
50% { left: -200%; } 
70% { left: -200%; } 
75% { left: -300%; } 
95% { left: -300%; } 
100% { left: -400%; } 
} 

@-moz-keyframes slidy { 
0% { left: 0%; } 
20% { left: 0%; } 
25% { left: -100%; } 
45% { left: -100%; } 
50% { left: -200%; } 
70% { left: -200%; } 
75% { left: -300%; } 
95% { left: -300%; } 
100% { left: -400%; } 
} 

@-o-keyframes slidy { 
0% { left: 0%; } 
20% { left: 0%; } 
25% { left: -100%; } 
45% { left: -100%; } 
50% { left: -200%; } 
70% { left: -200%; } 
75% { left: -300%; } 
95% { left: -300%; } 
100% { left: -400%; } 
} 

@-ms-keyframes slidy { 
0% { left: 0%; } 
20% { left: 0%; } 
25% { left: -100%; } 
45% { left: -100%; } 
50% { left: -200%; } 
70% { left: -200%; } 
75% { left: -300%; } 
95% { left: -300%; } 
100% { left: -400%; } 
} 

body { margin: 0; } 
div#slider { overflow: hidden; } 
div#slider figure img { width: 20%; float: left; } 
div#slider figure { 
    position: relative; 
    width: 500%; 
    margin: 0; 
    left: 0; 
    text-align: left; 
    font-size: 0; 
    animation: 30s slidy infinite; 
    -webkit-animation: 30s slidy infinite; 
    -moz-animation: 30s slidy infinite; 
    -o-animation: 30s slidy infinite; 
    -ms-animation: 30s slidy infinite; 
} 
</style> 
<div id="slider"> 
<figure> 
    <img alt="" src="#" /> 
    <img alt="" src="#" /> 
    <img alt="" src="#" /> 
    <img alt="" src="#" /> 
    <img alt="" src="http://static.lakana.com/nxsglobal/lasvegasnow/photo/2016/05/24/5mayors300X100-black-border_1464108603276_8689483_ver1.0.jpg" /> 
</figure> 
</div> 

Answer 1

Wie Sie hier sehen können, werden CSS-Animationen nicht in IE9 unterstützt: http://caniuse.com/#feat=css-animation

Answer 2

Ja das Problem IE zu verwenden ist. Wenn es für einen Client ist, können Sie ihm sagen, dass Sie dies nicht mit Legacy-Browsern machen können, stattdessen etwas anzeigen (im Idealfall eine Nachricht, um ihren Browser zu aktualisieren)