web-dev-qa-db-ja.com

：after /：before擬似クラス内でCSS遷移プロパティをアニメーション化します

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/

csscss3css-transitionspseudo-element
29
daryl

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

[〜＃〜] edit [〜＃〜]：2016年現在、記事へのリンクが壊れており、 関連するWebKitのバグ was fixed4年前。他の答えを見るために読んでください、これは時代遅れです。

11
Litek

Google Chromeバージョン27.0.1453.110にWebkitバグ修正を追加m

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

IT IS POSSIBLE擬似:beforeおよび:afterをアニメーション化するには、ここにいくつかあります擬似要素:beforeおよび:afterをアニメーション化する例。

上記の例にいくつかの編集を加えて変更すると、ホバーでのmouseleave/mouseoutの遅延をシミュレートすることなく、よりスムーズにアニメーションを出し入れできます。

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

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

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

今後、:beforeや:afterなどの疑似要素は、二重コロン構文::beforeおよび::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トランジションまたはアニメーションをサポートします。）

12
Jonathan Marzullo

それは 動作していないようです 現在、 W3仕様 に従って、遷移を疑似要素に適用できます。将来的には…

0
Lapple