34

CSS 疑似クラスをアニメーション化することは可能ですか?

私が持っているとしましょう：

#foo:after {
    content: '';
    width: 200px;
    height: 200px;
    background: red;
    display: block;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}

#foo:hover:after {
    width: 250px;
    height: 250px;
}

これは可能ですか？私はテストを行ってきましたが、これまでのところ解決策が見つからないようです。Modernizr を使用して、必要な JavaScript サポートの量を削減しようとしています。

私はすでに JavaScript メソッドを持っているので、JavaScript の代替手段は使用しないでください。

デモ: http://jsfiddle.net/MxTvw/

4

4 に答える 4

12

Google Chrome は Webkit のバグ修正をバージョン 27.0.1453.110 m に追加しました

この WebKit バグは修正されました: http://trac.webkit.org/changeset/138632

疑似:beforeおよびをアニメーション化することは可能です。疑似要素および:afterをアニメーション化するための例をいくつか示します。:before:after

上記の例にいくつかの編集を加えた変更を次に示します。これにより、シミュレートされたmouseleave/mouseoutホバーの遅延なしで、よりスムーズにアニメーション化およびアニメーション化されます。

http://jsfiddle.net/MxTvw/234/

2 番目の疑似クラス ルール#fooで、グループ化された疑似クラスを含むメイン セレクターを追加してみてください。のベンダー固有のプレフィックス付きプロパティだけでなく、プロパティも追加します。:hover:hovertransitiontransition

#foo:after{
   display: block;
   content: '';
   width: 200px;
   height: 200px;
   background: red;
   -webkit-transition: all .4s ease-in-out;
   -moz-transition: all .4s ease-in-out;
   -o-transition: all .4s ease-in-out;
   transition: all .4s ease-in-out;
} 

#foo,
#foo:hover:after,
#foo:hover:before{
   width: 250px;
   height: 250px;
}

:beforeandのような疑似要素:afterは、二重コロン構文::beforeandを使用する必要があることに注意してください::after。この例では、オーバーレイbackground-colorとbackground-imageホバーを使用してフェード インとフェード アウトをシミュレートします。

http://jsfiddle.net/MxTvw/233/

この例では、ホバー時の回転のアニメーションをシミュレートします。

http://jsfiddle.net/Jm54S/28/

もちろん、使用できる css3 標準を進めて::before、::after.

これは、最新の Firefox、Chrome、Safari、Opera 18 以降、IE10、IE11 で動作します(IE9 以下では、css3 トランジションまたはアニメーションをサポートしていません)。

于 2012-10-20T03:50:55.273 に答える
12

あなたのフィドルは Firefox でうまくいきます。そして、私の知る限り、この記事が最新の場合、疑似要素をアニメーション化できるブラウザはこれだけです。

編集: 2016 年現在、記事へのリンクが壊れており、関連する WebKit バグは4 年前に修正 されました。他の回答を見るために読んでください。これは時代遅れです。

于 2011-10-18T15:54:10.577 に答える
0

現在は機能していないようですが、 W3 仕様によれば、疑似要素にトランジションを適用できます。将来的には…</p>

于 2011-10-18T15:51:34.990 に答える