web-dev-qa-db-ja.com

CSSトランジションとトランスフォームのプレフィックスの正しい組み合わせは何ですか？

最も幅広いブラウザとバージョンをカバーするために、このCSSにプレフィックスを付ける正しい方法は何でしょうか。

バージョン1：

-webkit-transition: -webkit-transform .3s ease-in-out;
   -moz-transition:    -moz-transform .3s ease-in-out;
    -ms-transition:     -ms-transform .3s ease-in-out;
     -o-transition:      -o-transform .3s ease-in-out;
        transition:         transform .3s ease-in-out;

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg);
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

またはバージョン2：

-webkit-transition: transform .3s ease-in-out;
   -moz-transition: transform .3s ease-in-out;
    -ms-transition: transform .3s ease-in-out;
     -o-transition: transform .3s ease-in-out;
        transition  transform .3s ease-in-out;

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg);
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

移行プロパティでベンダープレフィックスを使用する場合は、移行するベンダープレフィックス属性もターゲットにする必要があるように思われます。

私はこれに対する閉鎖を本当に見つけることができません。

csscss-transitionscss-transformsvendor-prefix
21
Jabba Da Hoot

非常によく似た質問 ..で述べたように.

これは、標準化された機能のベンダープレフィックスが非常に問題になるケースの1つです。これは、のさまざまなプレフィックス付きおよび/またはプレフィックスなしの実装をすべて考慮する必要があるためです。さまざまなブラウザのさまざまなバージョンのさまざまな機能。

なんて一口。そして、これらのさまざまな順列を結合する必要があります。なんと一握り。

つまり、各ブラウザのどのバージョンで個々のプロパティごとにプレフィックスが必要かを把握する必要があります。肥大化を気にしない限り、個々のブラウザに異なるプレフィックスを適用する必要があります。

リンクされた質問は、トランジションではなくアニメーションを参照しているため、表記が大幅に異なりますが、どちらの機能も同様の接頭辞なしのプロセスを経ています。そうは言っても、これがcaniuse.comの 2D変換 および 遷移 の互換性テーブルです。

つまり、あるブラウザの1つのバージョンで一方の機能のプレフィックスが付けられているからといって、同じブラウザの同じバージョンでもう一方の機能のプレフィックスが付けられているとは限りません。たとえば、Chromeプレフィックスなしのトランジションはプレフィックスなしの変換（36）の前に少なくとも10のメジャーバージョン（26）であり、Safaristill変換にはプレフィックスが必要です。その結果、次の宣言が必要になります。

_transition: -webkit-transform .3s ease-in-out;
_

また、どうしても必要な場合は、古いバージョンでも次のようにカバーする必要があります。

_-webkit-transition: -webkit-transform .3s ease-in-out;
_

他のブラウザは、奇跡的に、トランジションとトランスフォーム（およびアニメーション）の両方のプレフィックスを同時に解除することができました。これにより、作業がはるかに簡単になります。

  • _-ms-transition_は、有効期限が切れてから長いIE10のプレリリースバージョンでのみ使用されます。他のバージョンのIEは接頭辞付きの遷移を使用しないため、その特定の遷移接頭辞を削除する必要があります。

    プレフィックス付きの_-ms-transform_はIE9でのみ使用されます。 IE10以降には、接頭辞のない変換が付属しています。ただし、適切に機能を低下させるために、-ms-transform: rotateX(-30deg);宣言を保持することをお勧めします。IE9はCSSトランジションまたはアニメーションをサポートしていないため、トランジションできないことに注意してください。

  • _-moz-transition_および_-moz-transform_は、Firefoxで15まで使用されていましたが、16では接頭辞がありませんでした。

  • _-o-transition_および_-o-transform_はOpera 12.00までで使用され、12.10ではプレフィックスが付けられず、その後のバージョンでは_-webkit-_として再プレフィックスされます。点滅に移動します。

要約すると、caniuse.comから提供された情報（ほとんどの部分で最新かつ正確であると私は信じています）に基づいて、必要なすべてのプレフィックスを以下に示します。

_-webkit-transition: -webkit-transform .3s ease-in-out; /* Chrome < 26, Safari < 7 */
   -moz-transition:    -moz-transform .3s ease-in-out; /* Firefox < 16 */
     -o-transition:      -o-transform .3s ease-in-out; /* Opera < 12.10 */
        transition: -webkit-transform .3s ease-in-out; /* Chrome 26-35, Safari, Opera 15-23 */
        transition:         transform .3s ease-in-out; /* IE10+, Firefox 16+, Chrome 36+, Opera 12.10 */

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg); /* Only for graceful degradation in IE9, cannot be transitioned */
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);
_

この記事の執筆時点で、各ブラウザの最新バージョンをサポートするために必要な最低限の要件は次のとおりです。

_        transition: -webkit-transform .3s ease-in-out; /* Chrome 26-35, Safari, Opera 15-23 */
        transition:         transform .3s ease-in-out; /* IE10+, Firefox 16+, Chrome 36+, Opera 12.10 */

 -webkit-transform: rotateX(-30deg);
         transform: rotateX(-30deg);
_

コメントで述べたように、 Autoprefixer のようなツールを使用して、必要なブラウザサポートのレベルに基づいてこれを自動化できます。ただし、CSSを手動で作成することを好む人、またはどのブラウザーでどのプレフィックスが必要かを正確に知りたい人にとっては、これがそれです。

最後に、上記の例の2つの接頭辞のないtransition宣言に注意してください。さて、次のようにそれらを1つの宣言に組み合わせるだけで十分簡単だと思うでしょう。

_transition: -webkit-transform .3s ease-in-out, transform .3s ease-in-out;
_

しかし、残念ながら、 Chromeは誤ってこの宣言を完全に無視します 、他のブラウザはそれを問題なく適用します。

20
BoltClock

現在のところ、各ブラウザの上位2つの最新バージョンをサポートしている場合、必要なプレフィックスは次のとおりです。

-webkit-transition: -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out;

-webkit-transform: rotateX(-30deg);
transform: rotateX(-30deg);

したがって、あなたの質問に答えるには、はい、prefix-transitionはprefix-transformをターゲットにする必要があります。これは変換には常に当てはまります（他のプロパティには必ずしも当てはまりません。Flexboxおよびグラデーションはプレフィックスごとに複雑になる可能性があるため、 Autoprefixer を使用してそれらを保持することをお勧めしますルールはまっすぐ）。

また、この種の質問を理解するための私のお気に入りの方法は、 CodePen の新しいペンに移動し、CSS設定でAutoprefixerをオンにして、コードを貼り付けてコンパイルすることです。 Autoprefixerは、各ブラウザの上位2つにプレフィックスを自動的に追加します。ちょっと魔法！

2
Timothy Miller

結局のところ、古いバージョンの自動更新ブラウザをサポートするためだけにWebページの読み込みを遅くするのはばかげています。また、IEの場合、アニメーションのmsプレフィックスはプレリリースバージョンでのみ使用されます。したがって、合理的な人が必要とするのは、SafariのWebkiting変換のサポートだけです。

transition: transform .3s ease-in-out;
/*you can put -webkit-transform below, but that will only waste space*/
transition: -webkit-transform .3s ease-in-out;

transform: rotateX(-30deg);
-webkit-transform: rotateX(-30deg);

そしてVoilà：最新バージョンの自動更新ブラウザのサポートを維持しながら、これらすべての重いプレフィックスを持つのと同じIE互換性があります。本当にその.001のサポートを提供する必要があると感じた場合は、ブラウザの更新を遅らせ続ける人の割合は、ページが正しく表示されない場合にブラウザの更新ボタンをクリックするようにユーザーに指示する小さなメッセージを画面の下部に配置するだけです。

0
Jack Giffin