La animación CSS no funciona en IE cuando se usa: Hover y: Hover: primera letra

Question

Estoy tratando de cambiar el color de la primera letra y animar un texto con CSS. En Chrome y Safari funciona correctamente, pero en Internet Explorer 10 y 11 no puedo hacer que funcione. Aquí está mi 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;
}

Si no hay: pseudo elemento de primera letra, la animación funciona en IE como un encanto.

Answer 1

No estoy seguro de por qué hace esto. Siempre que agregue una propiedad al :first-letter Clase Psuedo, la animación ya no funcionará.

los :first-letter La clase Psuedo parece cancelar el flotante anterior.

jsfiddle

Como puede ver cada vez que la clase Psuedo esté activa, cancelará cualquier anterior: Hover (la transición en este caso).

Entonces, en tu caso, ni siquiera ejecuto tu animación

No sé por qué sucede esto, parece un nuevo error de Big anterior:

:first-letter La clase Psuedo no funciona cuando es seguida por una clase o pseudo-clase (por ejemplo, div: primera letra: flotante).
¿Parece que es al revés ahora?

La teoría es que cuando hay una pseudo-clase antes del :first-letter no funcionará. Podría ser que un :hover La pseudo-clase no se ve como "contenido generado".

Cuando: la primera letra y: los pseudo-elementos de primera línea se aplican a un elemento que tiene contenido generado usando: antes y: después, se aplican a la primera letra o línea del elemento, incluido el contenido generado.

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

De esa manera el :hover no se está mostrando.

---

Miré varias documentaciones y no pude encontrar ninguna otro Relación entre la animación, los fotogramas clave, la transformación, la clase Psuedo de primera letra. Excepta entre la clase Puedo de Puedo y la clase de primera letra que podría no interactuar entre sí en IE.

---

Tl; Dr

Lo más probable es que sea un error.
Su :first-letter Psuedo-Class no funciona con el :hover Psuedo-Clase del elemento principal. la :hover Clase psuedo que no se mostrará, por lo tanto, su animación no está cargada.

Solución alterna

Puede simplemente colocar el contenido directamente en su HTML y envolver la primera letra en un lapso:

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

Donde agrega un estilo cuando se ronda el ancla:

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

jsfiddle

Answer 2

¿En qué versión de IE estás probando? Debería funcionar en IE 10 y 11, sin embargo, las versiones anteriores no admiten el uso de la animación CSS3. Echar un vistazo http://caniuse.com/css-animation

Answer 3

Si está probando en la versión 9 o más, entonces no mostrará nada

Puedes poner tu navegador en IE 10 o superior con F12 botón y luego seleccionar Browsermode IE10 o IE11