121

background-position以外のすべてのプロパティにCSSトランジションを適用したいと思います。私はそれをこのようにしようとしました：

.csstransitions a {
    -webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.3s ease;                 
    -o-transition: all 0.3s ease;   
    -ms-transition: all 0.3s ease;          
    transition: all 0.3s ease;
}

.csstransitions a {
    -webkit-transition: background-position 0s ease 0s;                 
    -moz-transition: background-position 0s ease 0s;                
    -o-transition: background-position 0s ease 0s;  
    -ms-transition: background-position 0s ease 0s;         
    transition: background-position 0s ease 0s;
}

最初にすべてのプロパティをtransitionに設定し、次にbackground-positionプロパティのtransitionのみを上書きしようとしました。

ただし、これにより他のすべてのプロパティもリセットされるようです。したがって、基本的に、遷移はもう発生しないようです。

すべてのプロパティを一覧表示せずにこれを行う方法はありますか？

4

6 に答える 6

163

Firefox でも機能するソリューションを次に示します。

transition: all 0.3s ease, background-position 1ms;

小さなデモを作成しました: http://jsfiddle.net/aWzwh/

于 2014-06-23T16:43:16.440 に答える
20

遅れないことを願っています。それはたった1行で達成されます！

-webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;

これはChromeで機能します。CSSプロパティはコンマで区切る必要があります。

これが実際の例です：http：//jsfiddle.net/H2jet/

于 2013-02-28T14:50:51.527 に答える
5

標準の W3C の方法を試すことができます。

.transition { transition: all 0.2s, top 0s, left 0s, width 0s, height 0s; }

http://jsfiddle.net/H2jet/60/

于 2016-05-10T09:17:30.750 に答える
2

試す：

-webkit-transition: all .2s linear, background-position 0;

これは私にとって似たようなものでうまくいきました..

于 2012-10-18T20:00:27.380 に答える