Вопрос по css3 – IE10 - CSS анимация не работает

5

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

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

Вот 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;
}
Могу ли я спросить, почему вы используете расширения сторонних разработчиков внутри@-ms-keyframes блок, который очень четко читается только IE? Niet the Dark Absol
Я копировал и вставлял в таблицу стилей и не удосужился привести это в порядок. dex3703
Вы также должны всегда заканчивать свой список недвижимости стандартами в соответствии с префиксами. Volker E.

Ваш Ответ

2   ответа
5

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

Ссылка справки я следовалhttp://msdn.microsoft.com/library/ie/hh673530.aspx

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

16

поддерживается в 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 */
}

Скрипки:http://jsfiddle.net/ZfJ4Z/1/

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded

Похожие вопросы