L'animazione CSS non funziona in IE quando si utilizza: Hover e: Hover: First-Letter

Question

Sto cercando di cambiare il colore della prima lettera e animare un testo con CSS. In Chrome e Safari funziona correttamente ma in Internet Explorer 10 e 11 non riesco a farlo funzionare. Ecco il mio codice 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 non esiste: Pseudo Element di prima lettere, l'animazione funziona in IE come un fascino.

Answer 1

Non sono sicuro del perché lo faccia. Ogni volta che aggiungi una proprietà al :first-letter Classe di Psuedo, l'animazione non funzionerà più.

Il :first-letter La classe Psuedo sembra annullare il passaggio precedente.

jsfiddle

Come puoi vedere ogni volta che la classe Psuedo è attiva, annulla qualsiasi precedente: Hover (la transizione in questo caso).

Quindi nel tuo caso non eseguo nemmeno la tua animazione

Non sono per questo che ciò accade, sembra un nuovo bug del precedente Big:

:first-letter La classe Psuedo non funziona quando è seguita da una classe o pseudo-Classe (ad esempio Div: First-Letter: Hover).
Sembra che sia il contrario adesso?

la teoria è che quando si verifica una classe pseudo prima del :first-letter Non funzionerà. Potrebbe essere che a :hover Pseudo-Classe non è visto come "contenuto generato".

Quando il: prima lettere e: gli pseudo-elementi di prima linea vengono applicati a un elemento generato contenuto usando: prima e: dopo, si applicano alla prima lettera o linea dell'elemento incluso il contenuto generato.

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

In questo modo il :hover non viene mostrato.

---

Ho guardato diverse documentazioni e non sono riuscito a trovarne nessuna Altro Relazione tra animazione, keyframe, tranformazione, prima classe-classe. Eccect tra la classe puedo-Classe del mouse e la prima classe che potrebbero non interagire tra loro in IE.

---

Tl; dr

Molto probabilmente è un bug.
Tuo :first-letter la Classe psued non funziona con il :hover Classe psued dell'elemento genitore. il :hover Classe psued che non verrà mostrata, quindi l'animazione non viene caricata.

Lavorare

Potresti semplicemente posizionare il contenuto direttamente nel tuo HTML e avvolgere la prima lettera in un arco:

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

Dove aggiungi uno stile quando l'ancora è librata:

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

jsfiddle

Answer 2

In quale versione di IE stai testando? Dovrebbe funzionare in IE 10 e 11, tuttavia le versioni precedenti non supportano l'uso dell'animazione CSS3. Guarda http://caniuse.com/css-animation

Answer 3

Se stai testando nella versione 9 o più vecchio, non mostrerà nulla

Puoi mettere il tuo browser in IE 10 o superiore con F12 pulsante e quindi selezionare Browsermode Ie10 o ie11