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.
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;
}