2012-04-27 22 views
5

Mam animację skali, która działała w IE10 przez około dzień, a następnie zatrzymał się. Nie wprowadziłem żadnych zmian i nie jestem pewien, co by się z tym stało.IE10 - animacja CSS nie działa

Czy ktoś ma jakieś pomysły? Kiedy patrzę na narzędzia IE dev, nie wychwytuję nazwy animacji, ale przechwytuję wszystkie pozostałe właściwości.

Oto 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

Czy mogę zapytać, dlaczego używasz non-IE rozszerzeń dostawcy wewnątrz znakiem '@ -ms-keyframes' blok, który jest bardzo wyraźnie czytany tylko przez IE? –

+0

Kopiuję i wklejam wewnątrz arkusza stylów i nie zadałem sobie trudu, aby to uporządkować. – dex3703

+1

Powinieneś zawsze kończyć listę swoich nieruchomości zgodnie ze standardami zgodnie z ich niepotwierdzonymi. –

Odpowiedz

5

Widocznie link help byłem poniższych nie jest poprawna. Kiedy zmienię go na -ms-animation: move97 0.2s, to działa. To było to, co miałem pierwotnie i to NIE działa, więc zmieniłem go na to, co pokazano powyżej, co zrobiłem.

Link Pomoc Śledziłem: http://msdn.microsoft.com/library/ie/hh673530.aspx

Powiedziano mi, to będzie poprawione.

15

Standardowa składnia to supported in Internet Explorer 10 bez prefiksu -ms dla deklaracji klatek kluczowych, ani dla właściwości animation-name. W rzeczywistości, IE10, podobnie jak inne produkty dostawcy, wspiera skrótowej animation właściwość sam także:

@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

Zapytania o media mogą blokować przeglądarkę IE także w przypadku animacji klatek kluczowych. –

+1

Wyciągnąłem klatki kluczowe do ich własnych plików zamiast ich w moich komponentach zapakowanych w media-zapytania i to naprawiłem. Dzięki Graham – ConorLuddy