2012-04-27 13 views
5

Ich habe eine Skala Animation, die in IE10 für etwa einen Tag gearbeitet und dann gestoppt. Ich habe keine Änderungen vorgenommen und bin mir nicht sicher, was passieren würde, um es zu brechen.IE10 - CSS-Animation funktioniert nicht

Hat jemand irgendwelche Ideen? Wenn ich in den IE-Entwicklungswerkzeugen nachschaue, nimmt es nicht den Animationsnamen auf, sondern nimmt alle anderen Eigenschaften auf.

Hier ist die CSS:

@-ms-keyframes move97 
{ 
    0% { 
     transform:scale(1,1); 
     -ms-transform:scale(1,1); 
     -moz-transform:scale(1,1); 
     -webkit-transform:scale(1,1); 
     -o-transform:scale(1,1); 
    } 
    50% { 
     transform:scale(0.97,0.97); 
     -ms-transform:scale(0.97,0.97); 
     -moz-transform:scale(0.97,0.97); 
     -webkit-transform:scale(0.97,0.97); 
     -o-transform:scale(0.97,0.97); 
    } 
    100% { 
     transform:scale(1,1); 
     -ms-transform:scale(1,1); 
     -moz-transform:scale(1,1); 
     -webkit-transform:scale(1,1); 
     -o-transform:scale(1,1); 
    } 
} 

.press97 
{ 
    -ms-animation-name: move97 0.2s; /* note MS has this different.... ugh */ 
    animation: move97 0.2s; 
    -moz-animation: move97 0.2s; /* Firefox */ 
    -webkit-animation: move97 0.2s; /* Safari and Chrome */ 

    animation-timing-function: linear; 
    -moz-animation-timing-function: linear; 
    -webkit-animation-timing-function: linear; 
    -ms-animation-timing-function: linear; 

    animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
    -moz-animation-fill-mode: forwards; 
    -ms-animation-fill-mode: forwards; 
} 
+4

Darf ich fragen, warum Sie nicht-IE Erweiterungen des Herstellers innerhalb eines verwenden '@ -ms-keyframes-Block, der sehr klar nur von IE gelesen wird? –

+0

Ich kopierte und Einfügen in das Stylesheet und hatte nicht die Mühe, das aufzuräumen. – dex3703

+1

Sie sollten Ihre Property-Liste auch immer mit den Standards nach Präferenz beenden. –

Antwort

5

Anscheinend ist der Hilfe-Link I folgende nicht korrekt ist. Wenn ich es in -ms-animation: move97 0.2s ändere, funktioniert es. Dies ist, was ich ursprünglich hatte und es hat nicht funktioniert, also habe ich es geändert, was oben gezeigt wurde, was tat.

Link Hilfe Ich folgte: http://msdn.microsoft.com/library/ie/hh673530.aspx

Ich habe gesagt, es korrigiert werde.

15

Die Standardsyntax ist supported in Internet Explorer 10 ohne die Notwendigkeit für den -ms Präfix auf der Keyframes Erklärung noch auf der animation-name Eigenschaft. In der Tat, IE10, wie die anderen Anbieter-Produkte, unterstützt die Stenografie animation Eigenschaft allein auch:

@keyframes myanimation { 
    0% { color: black; } 
    80% { color: gold; transform: translate(20px,20px); } 
    100% { color: black; translate(0,0); } 
} 

#anim { 
    display: inline-block; 
    animation: myanimation 5s 5; /* use myanimation 5s duration, 5 times */ 
} 

Fiddle: http://jsfiddle.net/ZfJ4Z/1/

+5

Medienabfragen können den IE daran hindern, auch Keyframe-Animationen zu sehen. –

+1

Ich habe meine Keyframes in eine eigene Datei ausgelagert, anstatt sie in meinen mit Medien abgefragten Komponenten zu haben. Danke Graham – ConorLuddy