IE10 CSS взломать свойство анимации?

Можно ли создать взломанный IE10 для свойства CSS animation?

Я использовал это:

height: 70px\9;

Однако это не работает для animation. Следующее остановит анимацию, работающую для всех браузеров:

animation: none\9;

Я хочу сделать это в моей существующей таблице стилей без использования JavaScript или условных таблиц стилей.

Ответы

Ответ 1

Это должно быть одним из самых странных случаев в 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>