☰

CSS3 トランジションを background-position 以外のすべてのプロパティに適用するにはどうすればよいですか? 質問する

tag-icon • tag-icon css css-transitions
CSS3 トランジションを background-position 以外のすべてのプロパティに適用するにはどうすればよいですか? 質問する

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 のみを上書きしようとしました。

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

すべてのプロパティをリストせずにこれを行う方法はありますか?

ベストアンサー1

Firefox でも機能する解決策は次のとおりです。

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

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

おすすめ記事