I'm not sure why it does this. Whenever you add a property to the :first-letter
psuedo class, the animation won't work anymore.
The :first-letter
psuedo class seems to cancel the previous hover.
As you can see whenever the psuedo class is being active, it will cancel any previous :hover (the transition in this case).
So in your case i doesn't even execute your animation
I don't why this happens, it seems like a new bug of previous big:
:first-letter
psuedo class doesn't work when it is followed by a class or pseudo-class (e.g. div:first-letter:hover).
It seems it is the other way around now?
theory is that whenerver there is a pseudo-class before the :first-letter
it won't work.
It might be that a :hover
pseudo-class is not seen as "generated content".
When the :first-letter and :first-line pseudo-elements are applied to an element having content generated using :before and :after, they apply to the first letter or line of the element including the generated content.
source : http://www.w3.org/TR/CSS2/selector.html#before-and-after
That way the :hover
is not being shown.
I looked at several documentations and couldn't find any other relation between the animation, keyframes, tranformation, first-letter psuedo-class. Excpect between the hover puedo-class and first-letter psuedo-class that might not interact with each other in IE.
TL;DR
It's most likely a bug.
Your :first-letter
psuedo-class isn't working with the :hover
psuedo-class of the parent element. the :hover
psuedo-class that will not be shown, thus your animation is not loaded.
Work around
You could just place the content directly in your HTML and wrap the first letter into a span:
<div style="width:160px;height:300px;float:right;">
<a href="kapcsolat.html" class="animated menu5">
<span>K</span>apcsolat
</a>
</div>
Where you add a style when the anchor is hovered:
.menu5:hover > span
{
color: black;
}