1. ホーム
  2. css

[解決済み] CSS3 の transition を background-position 以外のすべてのプロパティに適用するにはどうすればよいですか?

2022-08-22 03:18:23

質問

background-position以外のプロパティにCSSのtransitionを適用したい。 この方法でやってみたのですが

.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のみに上書きしてみました。

しかし、これは他のすべてのプロパティもリセットしてしまうようで、基本的にどの遷移も起こらなくなったようです。

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

どのように解決するのですか?

Firefoxでも動作する解決策を紹介します。

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

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