Анимация CSS не работает в IE при использовании: Hover и: Hover: First-Bolter

Question

Я пытаюсь изменить цвет первой буквы и оживить текст с CSS. В Chrome и Safari он работает должным образом, но в Internet Explorer 10 и 11 я не могу заставить его работать. Вот мой код CSS:

.amy:before {
    content:"Amy";
}
.amy {
    display: block;
    width:50px;
    height:30px;
    color:#c63b2c;
    font-size:24px;
}
.amy:hover {        
    display: block;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: wobble;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: wobble;
    -o-animation-duration: 2s;
    -o-animation-iteration-count: infinite;
    -o-animation-name: wobble;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: wobble; 
}
.amy:hover:first-letter {
    color:black;
}

Если нет: псевдо-элемент первого буква, анимация работает в т.е. как очарование.

Answer 1

Я не уверен, почему это делает это. Когда вы добавляете свойство в :first-letter Класс PSUEDO, анимация больше не будет работать.

А :first-letter Класс PSuedo, кажется, отменяет предыдущее наклонение.

jsfiddle

Как вы можете видеть всякий раз, когда класс Psuedo активен, он отменит любое предыдущее: Hover (переход в этом случае).

Так что в вашем случае я даже не выполняю вашу анимацию

Я не так, почему это происходит, это кажется новой ошибкой предыдущей Большой:

:first-letter Класс PSuedo не работает, когда за ним следует класс или псевдо-класс (например, Div: First-Boltter: Hover).
Кажется, сейчас наоборот?

Теория заключается в том, что после того, как есть псевдо-класс перед :first-letter это не сработает. Может быть, что :hover Псевдо-класс не рассматривается как «сгенерированный контент».

Когда псевдоэлементы первой линии первой буквы и: первой линейной сгенерированный контент.

источник : http://www.w3.org/tr/css2/selector.html#before-and-fer

Таким образом :hover не показывается.

---

Я посмотрел на несколько документов и не смог найти Другой Соотношение между анимацией, ключами, трансформацией, первым буквами psuedo-класса. Экспертиза между классом Puedo Hover и PSUedo-классом первого буква, который может не взаимодействовать друг с другом в IE.

---

TL; DR

Скорее всего, это ошибка.
Ваш :first-letter psuedo-class не работает с :hover PSUEDO-класс родительского элемента. а :hover Класс PSUEDO, который не будет показан, поэтому ваша анимация не загружена.

Работать

Вы можете просто поместить контент прямо в свой HTML и обернуть первую букву в пролет:

<div style="width:160px;height:300px;float:right;">
    <a href="kapcsolat.html" class="animated menu5">
        <span>K</span>apcsolat
    </a>
</div>

Где вы добавляете стиль, когда якорь парирует:

.menu5:hover > span
{
   color: black;
}

jsfiddle

Answer 2

В какой версии IE вы тестируете? Он должен работать в IE 10 и 11, однако предыдущие версии не поддерживают использование анимации CSS3. Взглянем http://caniuse.com/css-animation

Answer 3

Если вы тестируете в версии 9 или старше, то это ничего не покажет

Вы можете поместить свой браузер в IE 10 или выше с F12 кнопка, а затем выберите Browsermode IE10 или IE11