A animação CSS não funciona no IE quando estiver usando: Passe e: Passe o Passe: Primeira Letra

Question

Estou tentando mudar a cor da primeira letra e animar um texto com CSS. No Chrome e Safari, funciona corretamente, mas no Internet Explorer 10 e 11 não posso fazê -lo funcionar. Aqui está o meu código 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;
}

Se não houver: Pseudo-elemento de primeira carta, a animação funciona no IE como um charme.

Answer 1

Não sei por que isso faz isso. Sempre que você adiciona uma propriedade ao :first-letter PSUDOUS CLASSE, A animação não funcionará mais.

o :first-letter A aula de Psuedo parece cancelar o mouse anterior.

jsfiddle

Como você pode ver sempre que a classe PSUDO está sendo ativa, ela cancelará qualquer anterior: Passe o mouse (a transição neste caso).

Então, no seu caso, eu nem executo sua animação

Eu não não, por que isso acontece, parece um novo bug do Big Big anterior:

:first-letter A classe PSUDO não funciona quando é seguida por uma classe ou pseudo-classe (por exemplo, div: Primeira letra: Passe o mouse).
Parece que é o contrário agora?

teoria é que, quando server, há uma pseudo-classe antes do :first-letter não vai funcionar. Pode ser que um :hover A pseudo-classe não é vista como "conteúdo gerado".

Quando os pseudo-elementos de primeira linha e: os elementos de primeira linha são aplicados a um elemento com conteúdo gerado usando: antes e: depois, eles se aplicam à primeira letra ou linha do elemento, incluindo o conteúdo gerado.

fonte : http://www.w3.org/tr/css2/selector.html#before-and-after

Assim o :hover não está sendo mostrado.

---

Eu olhei para várias documentações e não consegui encontrar nenhum outro Relação entre a animação, quadros-chave, transformação, classe PSUDODO de primeira linha. Exceto entre a classe puedo e a classe PSUDODO de primeira letra que pode não interagir entre si no IE.

---

Tl; dr

É provavelmente um bug.
Sua :first-letter Psuedo-classe não está funcionando com o :hover PSUDEO-Class do elemento pai. a :hover PSUDOUS-Class que não será mostrado, portanto, sua animação não é carregada.

Gambiarra

Você pode simplesmente colocar o conteúdo diretamente em seu HTML e envolver a primeira letra em um período:

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

Onde você adiciona um estilo quando a âncora está pairada:

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

jsfiddle

Answer 2

Em que versão do IE você está testando? Ele deve funcionar no IE 10 e 11, no entanto, versões anteriores não suportam o uso da animação CSS3. Dê uma olhada http://caniuse.com/css-animation

Answer 3

Se você estiver testando na versão 9 ou mais, não mostrará nada

Você pode colocar seu navegador no IE 10 ou superior com F12 botão e depois selecione Browsermode IE10 ou IE11