web-dev-qa-db-ja.com

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

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

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

しかし、これは他のすべてのプロパティもリセットするようです-そのため、基本的に遷移はもう起こらないようです。

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

css3css-transitions
97
Dine

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

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

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

129
Felix Edelmann

遅れないことを願っています。これは、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/

17
aldo.roman.nurena

これを試して...

* {
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
}
a {
    -webkit-transition: background-position 1ms linear;
    -moz-transition: background-position 1ms linear;
    -o-transition: background-position 1ms linear;
    transition: background-position 1ms linear;
}
4
Siva

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

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

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

1
lucianmarin

試してください：

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

これは似たようなもので私のために働いた。

1
StuR

簡単な方法を探している人は、すべてのプロパティにトランジションを追加します遅延のある特定のプロパティを除く、最新のブラウザにもdifferencesがあることに注意してください。

以下の簡単なデモは違いを示しています。チェックアウト 完全なコード

div:hover {
  width: 500px;
  height: 500px;
  border-radius: 0;
  transition: all 2s, border-radius 2s 4s;
}

Chromeは、次のように2つのアニメーションを「結合」します（予想どおりです）。

enter image description here

Safariは「分離」しますが（予期しない場合があります）：

enter image description here

より互換性のある方法は、特定のプロパティのいずれかに遅延がある場合、特定のプロパティに特定の遷移を割り当てることです。

1
iplus26