Problema di animazione CSS IE10

Il problema che sto avendo è che una piccola sezione di un sito Web che ho creato funziona perfettamente su tutti i browser e sulle vecchie versioni di IE ma non sulle versioni più recenti. Come forse sapete, IE non supporta più le istruzioni [IF] in HTML e non sembra supportare il comando. Il mio problema è con una piccola animazione di alcune immagini usando il seguente CSS:

.fadein img { position:absolute; display: block; margin-left: auto; margin-right: auto; -webkit-animation-name: fade; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 32s; animation-name: fade; animation-iteration-count: infinite; animation-duration: 32s; } @-webkit-keyframes fade { 0% {opacity: 0;} 20% {opacity: 1;} 33% {opacity: 0;} 53% {opacity: 0;} 100% {opacity: 0;} } @keyframes fade { 0% {opacity: 0;} 20% {opacity: 1;} 33% {opacity: 0;} 53% {opacity: 0;} 100% {opacity: 0;} } #f1 { -webkit-animation-delay: -4s; } #f2 { -webkit-animation-delay: -8s; } #f3 { -webkit-animation-delay: -16s; } #f4 { -webkit-animation-delay: -24s; } #f5 { -webkit-animation-delay: -32s; } 

questo è attualmente in uso sulla pagina web http://www.portsmouthtap.co.uk a poche virgolette vicino al piè di pagina. Dalla ricerca che ho fatto, IE dovrebbe accettare “nome-animazione” ecc all’interno del CSS e dovrebbe essere in grado di emulare una versione precedente di se stesso. Ho provato a utilizzare js per emulare anche una versione precedente, ma ciò porta gli stessi risultati. Sono sicuro che mi manchi qualcosa di ovvio, quindi se qualcuno potesse aiutare, sarebbe molto apprezzato, grazie.

ps. nelle versioni più recenti di IE, le immagini appaiono e si dissolvono, ma tutte insieme, quindi non si ripetono, il che ovviamente non è l’effetto desiderato. Si prega di fare riferimento alla versione di Chrome del sito per vedere come dovrebbe essere l’animazione, grazie.

html corrispondente:

 

Eseguendolo attraverso Prefixr :

Ho capito:

 .fadein img { position: absolute; display: block; margin-left: auto; margin-right: auto; -webkit-animation-name: fade; -moz-animation-name: fade; -ms-animation-name: fade; -o-animation-name: fade; animation-name: fade; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 32s; animation-duration: 32s; } @keyframes "fade" { 0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } 20% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } 33% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } 53% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } } @-moz-keyframes fade { 0% { filter: alpha(opacity=0); opacity: 0; } 20% { filter: alpha(opacity=100); opacity: 1; } 33% { filter: alpha(opacity=0); opacity: 0; } 53% { filter: alpha(opacity=0); opacity: 0; } 100% { filter: alpha(opacity=0); opacity: 0; } } @-webkit-keyframes "fade" { 0% { filter: alpha(opacity=0); opacity: 0; } 20% { filter: alpha(opacity=100); opacity: 1; } 33% { filter: alpha(opacity=0); opacity: 0; } 53% { filter: alpha(opacity=0); opacity: 0; } 100% { filter: alpha(opacity=0); opacity: 0; } } @-ms-keyframes "fade" { 0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } 20% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } 33% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } 53% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } } @-o-keyframes "fade" { 0% { filter: alpha(opacity=0); opacity: 0; } 20% { filter: alpha(opacity=100); opacity: 1; } 33% { filter: alpha(opacity=0); opacity: 0; } 53% { filter: alpha(opacity=0); opacity: 0; } 100% { filter: alpha(opacity=0); opacity: 0; } } #f1 { -webkit-animation-delay: -4s; -moz-animation-delay: -4s; -ms-animation-delay: -4s; -o-animation-delay: -4s; animation-delay: -4s; } #f2 { -webkit-animation-delay: -8s; -moz-animation-delay: -8s; -ms-animation-delay: -8s; -o-animation-delay: -8s; animation-delay: -8s; } #f3 { -webkit-animation-delay: -16s; -moz-animation-delay: -16s; -ms-animation-delay: -16s; -o-animation-delay: -16s; animation-delay: -16s; } #f4 { -webkit-animation-delay: -24s; -moz-animation-delay: -24s; -ms-animation-delay: -24s; -o-animation-delay: -24s; animation-delay: -24s; } #f5 { -webkit-animation-delay: -32s; -moz-animation-delay: -32s; -ms-animation-delay: -32s; -o-animation-delay: -32s; animation-delay: -32s; } 

Assicurati di includere tutti i prefissi del browser per la compatibilità!

Hai solo le versioni di -webkit per questi:

 #f1 { -webkit-animation-delay: -4s; }