L'animation CSS ne fonctionne pas dans IE lorsque vous utilisez: Hover et: Hover: First-Letter

Question

J'essaie de changer la couleur de la première lettre et d'animer un texte avec CSS. Dans Chrome et Safari, cela fonctionne correctement, mais dans Internet Explorer 10 et 11, je ne peux pas le faire fonctionner. Voici mon code 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;
}

S'il n'y a pas de pseudo d'élément de première lettre, l'animation fonctionne dans IE comme un charme.

Answer 1

Je ne sais pas pourquoi cela fait cela. Chaque fois que vous ajoutez une propriété au :first-letter Classe PSUedo, l'animation ne fonctionnera plus.

La :first-letter La classe PSUedo semble annuler le volant précédent.

jsfiddle

Comme vous pouvez le voir chaque fois que la classe PSUedo est active, elle annulera tout précédent: survolera (la transition dans ce cas).

Donc, dans votre cas, je n'exécute même pas votre animation

Je ne sais pas pourquoi cela se produit, cela semble être un nouveau bug de Big précédent:

:first-letter La classe PSUedo ne fonctionne pas lorsqu'elle est suivie d'une classe ou d'une pseudo-classe (par exemple div: premier lettre: en survol).
Il semble que ce soit l'inverse maintenant?

La théorie est que lorsque le pervers, il y a une pseudo-classe avant le :first-letter Cela ne fonctionnera pas. Il se peut qu'un :hover La pseudo-classe n'est pas considérée comme "contenu généré".

Lorsque les pseudo-éléments de première lettre et: de première ligne sont appliqués à un élément ayant du contenu généré en utilisant: avant et: après, ils s'appliquent à la première lettre ou à la ligne de l'élément, y compris le Contenu généré.

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

De cette façon le :hover n'est pas montré.

---

J'ai regardé plusieurs documentations et je n'ai pas trouvé autre Relation entre l'animation, les images clés, la transmission, la classe PSUedo de première lettre. L'explique entre la classe de puredo de survol et la classe psudo de première lettre qui pourrait ne pas interagir les uns avec les autres dans IE.

---

Tl; dr

C'est probablement un bug.
Ton :first-letter La classe PSUedo ne fonctionne pas avec le :hover Classe PSUedo de l'élément parent. la :hover Classe PSUedo qui ne sera pas montrée, donc votre animation n'est pas chargée.

Solution de contournement

Vous pouvez simplement placer le contenu directement dans votre HTML et envelopper la première lettre en une durée:

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

Où vous ajoutez un style lorsque l'ancre est planée:

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

jsfiddle

Answer 2

Dans quelle version de IE testez-vous? Cela devrait fonctionner dans IE 10 et 11, mais les versions précédentes ne prennent pas en charge l'utilisation de l'animation CSS3. Regarde http://caniuse.com/css-animation

Answer 3

Si vous testez dans la version 9 ou plus, cela ne montre rien

Vous pouvez mettre votre navigateur dans IE 10 ou plus avec F12 bouton puis sélectionner Browsermode IE10 ou IE11