css animation doesn't work in IE when using :hover and :hover:first-letter

Question

I'm trying to change first letter color and animate a text with css. In Chrome and Safari it works properly but in Internet Explorer 10&11 I can't make it work. Here is my css code:

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

If there is no :first-letter pseudo element the animation works in IE like a charm.

Answer 1

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.

jsFiddle

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

jsFiddle

Answer 2

What version of IE are you testing in? It should work in IE 10 and 11, however previous versions do not support the use of CSS3 animation. Take a look http://caniuse.com/css-animation

Answer 3

If you are testing in version 9 or older then it won't show anything

You can put your browser into IE 10 or higher with F12 button and then select Browsermode IE10 or IE11