2012-04-27 3 views
5

У меня есть анимация масштаба, которая работала в IE10 примерно на один день, а затем остановилась. Я не вносил никаких изменений и не уверен, что бы сломать его.IE10 - анимация CSS не работает

У кого-нибудь есть идеи? Когда я смотрю в средствах IE dev, он не подбирает имя анимации, а собирает все остальные свойства.

Вот 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

Могу я спросить, почему вы используете не-IE расширений поставщика Внутри '@ -ms-keyframes', который очень четко читается только IE? –

+0

Я копировал и вставлял в таблицу стилей и не удосужился убрать это. – dex3703

+1

Вы также должны всегда заканчивать свой список свойств стандартами в соответствии с неподписанным. –

ответ

5

Видимо ссылка справки я следовал не правильно. Когда я меняю его на -ms-animation: move97 0.2s, он работает. Это то, что я изначально и не работал, поэтому я изменил его на то, что было показано выше.

Помощь ссылка Я следовал: http://msdn.microsoft.com/library/ie/hh673530.aspx

мне сказали, это будет исправлено.

15

Стандартный синтаксис: supported in Internet Explorer 10, не нуждающийся в префиксе -ms в объявлении ключевых кадров, а также в собственности animation-name. На самом деле, IE10, как и другие продукты поставщика, поддерживает сокращенную animation имуществом как единолично, так:

@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

медиа-запросы могут блокировать IE от просмотра анимации ключевых кадров. –

+1

Я вытащил свои ключевые кадры в свой собственный файл вместо того, чтобы иметь их в моих компонентах, связанных с медиа-запросом, и исправил их. Спасибо, Грэм – ConorLuddy

Смежные вопросы