CSSアニメーションはIEで機能しません：Hoverと：Hover：First-Letter

Question

最初の文字の色を変更し、CSSでテキストをアニメーション化しようとしています。 ChromeとSafariでは適切に機能しますが、Internet Explorer 10と11では機能させることはできません。これが私の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;
}

ない場合：ファーストレッターの擬似要素は、アニメーションが魅力のようにIEで機能します。

Answer 1

なぜこれを行うのかわかりません。にプロパティを追加するたびに :first-letter Psuedoクラス、アニメーションはもう機能しません。

:first-letter Psuedoクラスは、以前のホバーをキャンセルしているようです。

jsfiddle

PSUEDOクラスがアクティブになっているときはいつでも確認できるように、以前の任意の任意の任意のキャンセル（この場合の遷移）がキャンセルされます。

だからあなたの場合、私はあなたのアニメーションを実行することさえしません

なぜこれが起こるのではなく、以前の大きなバグのように思えます：

:first-letter PSUEDOクラスは、クラスまたは擬似クラスが続くと機能しません（例：Div：First-letter：Hover）。
それは今の逆のようですか？

理論では、whereverが擬似クラスの前にあるということです :first-letter うまくいきません。それはそれかもしれません :hover 擬似クラスは「生成されたコンテンツ」とは見なされていません。

場合：First-Letterおよび：First-Line Pseudo-Elementsは、以下を使用して生成されたコンテンツを持つ要素に適用されます。 生成されたコンテンツ.

ソース ： http://www.w3.org/tr/css2/selector.html#be and-after

そうすれば :hover 表示されていません。

---

いくつかのドキュメントを見て、見つけることができませんでした 他の アニメーション、キーフレーム、トランスフォーメーション、ファーストレッターのPsuedoクラスの関係。 IEで互いに相互作用しない可能性のあるホバープエドクラスとファーストレターのPsuedoクラスの間の観察。

---

tl; dr

おそらくバグです。
君の :first-letter Psuedo-classは、で動作していません :hover 親要素のpsuedoクラス。 :hover 表示されないpsuedo-classなので、アニメーションはロードされません。

回避します

コンテンツをHTMLに直接配置して、最初の文字をスパンに包むことができます。

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

アンカーがホバリングされているときにスタイルを追加する場所：

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

jsfiddle

Answer 2

どのバージョンのIEでテストしていますか？ IE 10および11で動作するはずですが、以前のバージョンではCSS3アニメーションの使用をサポートしていません。見てください http://caniuse.com/css-animation

Answer 3

バージョン9以降でテストしている場合、何も表示されません

ブラウザをIE 10以下に配置できます F12 ボタンと選択します Browsermode IE10またはIE11