CSSのzoomプロパティが標準化されたが、CSSアニメーションは不可なので注意

CSSのzoomプロパティが標準化

zoomプロパティは非標準的なプロパティのため、モダンなウェブ標準では推奨されていませんでしたが、2024年から標準化 (Baseline 2024 Newly available) となりました。

zoomプロパティは要素のサイズを拡大・縮小するためのプロパティです。

例えば要素に「zoom: 2;」のように指定すれば、2倍にサイズを拡大できます。

CSS

.foo {
  zoom: 2;
}

Mdnのドキュメントには「このプロパティの代わりに、transform: scale() を使用することもできます。」と記載されています。

しかし、transform: scale()はレイアウトに影響を与えずに他の要素に重って拡大・縮小するので、transform: scale()はzoomの代わりにはなりません。

zoomプロパティはCSSアニメーション不可

zoomプロパティはtransform: scale()と違い、拡大・縮小するとレイアウトに影響を与えるので、レスポンシブWebデザインとの相性が良いです。

一方でzoomプロパティはCSSアニメーションは不可なので、以下のようにtransitionプロパティなどを使ってもCSSアニメーションにならないので、使用する際は注意が必要です。

CSS

.scale,
.zoom {
  border: 1px solid orange;
}

.scale {
  scale: 1;
}

.zoom {
  zoom: 1;
}

.scale.double {
  scale: 2;
  transition: scale 2s;
}

.zoom.double {
  zoom: 2;
  transition: zoom 2s;
}

See the Pen CSS zoomプロパティはCSSアニメーション不可 by iwbjp (@xzdrtugn-the-reactor) on CodePen.

zoom - CSS: カスケーディングスタイルシート | MDN

CSSのzoomプロパティが標準化

zoomプロパティはCSSアニメーション不可

関連した記事