Можно ли создать взломанный IE10 для свойства CSS animation?
Я использовал это:
height: 70px\9;
Однако это не работает для animation. Следующее остановит анимацию, работающую для всех браузеров:
animation: none\9;
Я хочу сделать это в моей существующей таблице стилей без использования JavaScript или условных таблиц стилей.
Это должно быть одним из самых странных случаев в CSS, которые я видел еще. Я должен сказать, шляпы от вас для поиска - ну, спотыкаясь - это.
Причина неудачи \9 для свойства animation заключается в том, что, в отличие от большинства других свойств, идентификатор, который заканчивается на \9, фактически является допустимым значением для animation-name, который принимает идентификатор. В этом случае \9 представляет шестнадцатеричную escape-последовательность; то, что делают браузеры, принимает декларацию и ищет правило @keyframes с именем none\9, а точнее, идентификатор, состоящий из слова "none", за которым следует U + 0009 CHARACTER TABULATION, более известный как символ табуляции "\t", обычно считающийся пробелом в CSS. 1 Ссылка на вашу оригинальную анимацию теряется, поэтому элемент больше не анимируется.
1 Это технически то, что происходит всякий раз, когда используется \9 hack; хак использует тот факт, что это обычно приводит к ошибке синтаксического анализа в браузерах, отличных от IE. Не так для animation-name, как оказалось.
Как решить вашу проблему остановки анимации только на IE10 немного сложно. Вы можете использовать hack \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>