ついに全ブラウザで利用可能に！CSS transformが進化した件を鹿野壮さんに聞いてみた

8月30日(米国時間)にリリースされた「Google Chrome 105」ではセキュリティの拡張やコンテナクエリ/:has()の対応など大きなアップデートが盛り込まれていますが、そのひとつ前のバージョンである「Chrome 104」(8/3リリース)では、CSSに関連した大きなアップデートが話題になりました。GoogleのChromeデベロッパリレーションエンジニアのブラームス・ヴァン・ダム(Bramus Van Damme)氏はリリースの当日、CSSアップデートについてこうツイートしています。

このツイートでいわれている「個別のCSSプロバティを変換(individual CSS properties to do transforms)」できるメリットは何なのでしょうか。CSSエキスパートの鹿野壮さんにデモを交えながら教えていただきました。

今回話を伺ったエキスパート

フォローしよう！

Chrome 104がリリースされたとき、Googleのブラームスさんのツイートがずいぶん話題になりましたが、CSSでtransferプロパティを個別に書けるとどんな良いことがあるのでしょうか?

鹿野壮

従来、transform プロパティの値を設定するには、次のように指定する必要がありました。

.box {
  transform: translate(80px, 40px) rotate(45deg) scale(1.2);
}

Chrome 104、Microsoft Edge 104のリリースにより、次のように指定できるようになります。

.box {
  translate: 80px 40px;
  rotate: 45deg;
  scale: 1.2;
}

デモはこちらです。

Firefox/Safariはすでに現行版で対応済みなので、(Chromeでのサポートにより)全モダンブラウザで使える時代が来ました。

なるほど。もう少し具体的なメリットを教えてもらえるでしょうか。

鹿野壮

CSSのtransformのプロパティを個別に書けることのメリットのひとつは、CSSアニメーションを簡単に書けることです。

たとえば、次のようなアニメーションを考えてみます。BOXを左（0vw）から右（100vw）へ移動させているのですが、途中でBOXが1回転しています。

BOXを左から右に移動する際に1回展させるアニメーション

従来であれば、@keyframes は次のように書く必要がありました。40%から60%の間でBOXを1回転させているのですが、その時点での移動距離（translate）を考えて記述しなければなりません。

@keyframes my-animation {
  0% {
    transform: translate(0, 0) rotate(0);
  }

  40% {
    transform: translate(40vw, 0) rotate(0);
  }

  60% {
    transform: translate(60vw, 0) rotate(360deg);
  }

  100% {
    transform: translate(100vw, 0) rotate(360deg);
  }
}

CSSのtransform のプロパティを個別に記述すると、次のように記述できます。translateやrotateを個別に記述しており、translateの中間の値を書く必要はありません。

@keyframes my-animation {
  0% {
    translate: 0 0;
  }

  100% {
    translate: 100vw 0;
  }

  0%,
  40% {
    rotate: 0deg;
  }

  60%,
  100% {
    rotate: 360deg;
  }
}

こちらからデモを確認できます。

transformの個別プロパティ指定を活用し、シンプルにバグの少ないCSSを書いていくのがよいでしょう。以下に参考記事を挙げておきます。