【CSS】要素をズームインさせて表示する方法

画面を表示させた時に要素をズームインさせて表示する方法をメモしておく。使う技術はCSSアニメーションだ。結構簡単な記述で対応できるので、おすすめだ。

キーフレームをさらに細かく指定するといろいろなアニメーションができると思うので、好きな人は色々試してみてほしい。

表示結果

See the Pen XWNxJYQ by 山崎毅 (@nbudjgzu) on CodePen.

HTML

<div class="zoom">ズームさせる要素</div>

CSS

.zoom {
  animation: zoomIn 0.7s ease-in-out forwards;//0.7秒かけてズームインさせる
  animation-delay: 2s;//画面が表示されて2秒後に実行
  transform: scale(0,0);
}

@keyframes zoomIn {
  100% {
    transform: scale(1,1);
  }
}