個別の変換プロパティで CSS 変換をより詳細に制御

translate、rotate、scale プロパティを使用して要素を変換する

Bramus

L. David Baron

CSS transform プロパティ

要素に変換を適用するには、CSS transform プロパティを使用します。このプロパティは、1 つ以上の <transform-function> を受け取り、それらを順番に適用します。

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

ターゲット エレメントは、X 軸で 50% 移動され、30 度回転され、最後に 120% に拡大されます。

transform プロパティは問題なく機能しますが、これらの値を個別に変更する場合は少し面倒です。

ホバー時にスケールを変更するには、値が変更されていなくても、transform プロパティ内のすべての関数を複製する必要があります。

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

個々の変換プロパティ

Chrome 104 では、CSS 変換の個々のプロパティがリリースされます。プロパティは scale、rotate、translate であり、これらを使用して、変換の各部分を個別に定義できます。

これにより、すでにこれらのプロパティをサポートしている Firefox と Safari に Chrome が追加されます。

上記の transform の例を個々のプロパティで書き換えると、スニペットは次のようになります。

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

順序の重要性

元の CSS transform プロパティと新しいプロパティの主な違いの 1 つは、宣言された変換が適用される順序です。

transform を使用すると、変換関数は記述された順序で左（外側）から右（内側）に適用されます。

個々の変換プロパティの順序は、それが宣言される順序とは異なります。順序は常に同じです。まず translate（外側）、次に rotate、最後に scale（内側）です。

つまり、次のコード スニペットはどちらも同じ結果になります。

.transform--individual {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.transform--individual-alt {
  rotate: 30deg;
  translate: 50% 0;
  scale: 1.2;
}

どちらの場合も、対象の要素はまず X 軸で 50% だけ移動され、次に 30deg だけ回転され、最後に 1.2 だけ拡大されます。

個々の変換プロパティのいずれかが transform プロパティとともに宣言されている場合、個々の変換が最初に適用され（translate、rotate、scale）、最後に transform が適用されます（内部）。詳しくは、変換行列の計算方法を定義する仕様をご覧ください。

アニメーション

これらのプロパティが追加された主な理由は、アニメーションを容易にするためです。次のように要素をアニメーション化したいとします。

transform の使用

transform を使用してこのアニメーションを実装するには、定義されたすべての変換のすべての中間値を計算し、各キーフレームに含める必要があります。たとえば、10% の時点で回転を行うには、transform プロパティにすべての変換値が必要となるため、他の変換の値も計算する必要があります。

作成された CSS コードは次のようになります。

@keyframes anim {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

個々の変換プロパティを使用する

個々の変換プロパティを使用すると、記述が大幅に簡単になります。すべての変換をキーフレームからキーフレームにドラッグする代わりに、各変換を個別にターゲットにできます。また、中間の値をすべて計算する必要もありません。

@keyframes anim {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }

  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }

  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

個々の変換プロパティと複数のキーフレームを使用する

コードをモジュラー化するには、各サブアニメーションを一連のキーフレームに分割します。

@keyframes move {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }
}

@keyframes scale {
  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }
}

@keyframes rotate {
  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: move 2s, scale 2s, rotate 2s;
  animation-fill-mode: forwards;
}

この分割により、個別のプロパティになった transform プロパティが互いにオーバーライドされなくなるため、各キーフレーム セットを自由に適用できるようになります。上記の処理では、すべてを書き換えることなく、各変換に異なるタイミングを指定できます。

パフォーマンス

これらの新しいプロパティを使用するアニメーションは、既存の transform プロパティのアニメーションと同じくらい効率的です。

translate、rotate、scale のアニメーションは、transform のアニメーションと同じようにコンポーザで実行されるため、transform と同じようにアニメーションのパフォーマンスに適しています。

これらの新しいプロパティは、will-change プロパティでも機能します。一般的に、will-change の使用は、必要な要素の最小数で、可能な限り短い時間に抑えることをおすすめします。できるだけ具体的に記入することもできます。たとえば、will-change を使用し、rotate プロパティと filter プロパティを使用してアニメーションを最適化する場合は、will-change: rotate, filter を使用して宣言する必要があります。これは、rotate と filter をアニメーション化する場合に will-change: transform, filter を使用する場合よりも少し優れています。これは、will-change を使用するときに Chrome が事前に作成するデータ構造の一部が、transform と rotate で異なるためです。

相互運用性に関する新シリーズの一部