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プロパティの遷移のみを上書きしようとしました。
しかし、これは他のすべてのプロパティもリセットするようです-そのため、基本的に遷移はもう起こらないようです。
すべてのプロパティをリストせずにこれを行う方法はありますか?
Firefoxでも機能するソリューションを次に示します。
transition: all 0.3s ease, background-position 1ms;
小さなデモを作成しました: http://jsfiddle.net/aWzwh/
遅れないことを願っています。これは、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/
これを試して...
* {
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;
}
標準のW3Cの方法を使用して試すことができます。
.transition { transition: all 0.2s, top 0s, left 0s, width 0s, height 0s; }
試してください:
-webkit-transition: all .2s linear, background-position 0;
これは似たようなもので私のために働いた。
簡単な方法を探している人は、すべてのプロパティにトランジションを追加します遅延のある特定のプロパティを除く、最新のブラウザにもdifferencesがあることに注意してください。
以下の簡単なデモは違いを示しています。チェックアウト 完全なコード
div:hover {
width: 500px;
height: 500px;
border-radius: 0;
transition: all 2s, border-radius 2s 4s;
}
Chromeは、次のように2つのアニメーションを「結合」します(予想どおりです)。
Safariは「分離」しますが(予期しない場合があります):
より互換性のある方法は、特定のプロパティのいずれかに遅延がある場合、特定のプロパティに特定の遷移を割り当てることです。