Возможно ли создать IE10-хак для свойства CSS animation?IE10 CSS взломать свойство анимации?
Я использовал это:
height: 70px\9;
Однако это не работает для animation. Ниже будет остановить анимацию работы для всех браузеров:
animation: none\9;
Я хочу сделать это в моих существующей таблице стилей, без использования JavaScript или условных стилей.
Это должно быть одним из самых необычных случаев в CSS, которые я видел еще. Я должен сказать, что шляпы от вас для поиска - ну, спотыкаясь - это.
Причина \9 хак не выполняется для animation собственности, потому что, в отличие от большинства других свойств, идентификатор, который заканчивается в \9 на самом деле является допустимым значением для animation-name, который принимает идентификатор. В этом случае \9 представляет собой hexadecimal escape sequence; то, что делают браузеры, принимает декларацию и ищет правило @keyframes с именем none\9, или, точнее, идентификатор, состоящий из слова «none», за которым следует U + 0009 ХАРАКТЕРИСТИКА ТАБАЧЕНИЯ, более известный как символ табуляции "\t", обычно рассматриваемый пробел в CSS. Ссылка на вашу оригинальную анимацию теряется, и поэтому элемент больше не анимируется.
Это технически то, что происходит всякий раз, когда используется \9 хак; хак использует тот факт, что это обычно приводит к ошибке синтаксического анализа в браузерах, отличных от IE. Не так для animation-name, как выясняется.
Как решить вашу проблему остановить анимацию только на IE10 немного сложнее.You может использовать \9 взломать, но с другим свойством - animation-play-state, и, кроме того, для этого требуется, чтобы ваш элемент выглядел одинаково и имел те же стили, что и начальная точка анимации в IE10, потому что это эффективно делает это заморозить в начальной точке анимации в:
.element {
width: 50px;
height: 50px;
background-color: yellow;
animation: myanim 1s infinite alternate;
/* Pause the animation at 0% in IE10 */
animation-play-state: paused\9;
}
@keyframes myanim {
0% { background-color: yellow; }
100% { background-color: red; }
}<div class=element></div>к сожалению, у меня нет компьютера работает IE10, чтобы проверить это с, так что если вы обнаружите, что анимация в настоящее время приостановлена на IE11, а вы необходимо добавить другое правило CSS со следующим селектором hac к от Jeff Clayton:
.element {
width: 50px;
height: 50px;
background-color: yellow;
animation: myanim 1s infinite alternate;
/* Pause the animation at 0% in IE10 */
animation-play-state: paused\9;
}
_:-ms-fullscreen, :root .element {
/* Allow the animation to run in IE11 */
animation-play-state: running;
}
@keyframes myanim {
0% { background-color: yellow; }
100% { background-color: red; }
}<div class=element></div>Если вы не хотите использовать \9 взломать можно заменить
animation-play-state: paused\9;
с
-ms-animation-play-state: paused;
но вы будете определенно требуется t он IE11 взломал. В любом случае это все еще зависит от вашего статического правила CSS, имеющего те же стили, что и начальная точка.