Transition プロパティを利用した要素の拡大・縮小アニメーション - CSS

Transition プロパティを利用してCSSで要素を拡大、縮小させるアニメーションを作成します。

概要

Transition プロパティを利用すると、クラスが設定された際の変化を時間をかけて徐々に変更できます。この機能を利用して要素に対するアニメーションを実装できます。
今回はtansformプロパティのscale関数を利用して、要素を拡大させるアニメーションをするコードを紹介します。

プログラム

コード

hover-zoom.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="hover-zoom.css"/>
</head>
<body>
  <div>transform: scale のアニメーションのデモ</div>

  <div class="ContentsFrame">
    <div id="ContentFrameA" class="ContentFrame" >
      <p>Aの枠です</p>
    </div>
    <div id="ContentFrameB" class="ContentFrame" >
      <p>Bの枠です</p>
    </div>
    <div id="ContentFrameC" class="ContentFrame" >
      <p>Cの枠です</p>
    </div>
    <div id="ContentFrameD" class="ContentFrame" >
      <p>Dの枠です</p>
    </div>
    <div id="ContentFrameE" class="ContentFrame" >
      <p>Eの枠です</p>
    </div>
    <div id="ContentFrameF" class="ContentFrame" >
      <p>Fの枠です</p>
    </div>
    <div id="ContentFrameG" class="ContentFrame" >
      <p>Gの枠です</p>
    </div>
  </div>

  <p>テストページ</p>
</body>
</html>

hover-zoom.css

.ContentsFrame {
  width: 600px;
  height: 120px;

  border: 1px solid #ff6a00;
  padding-top: 2rem;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.ContentFrame {
  width: 64px;
  height: 64px;
  background-color:#ffd9a4;
  font-size:0.75rem;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

  .ContentFrame:hover {
    transform: scale(1.2,1.2);
  }

解説

HTMLの枠部分のコードです。
ContentsFrameクラスを指定したdivタグ内に、ContentFrameクラスを指定した枠を8個表示します。

  <div class="ContentsFrame">
    <div id="ContentFrameA" class="ContentFrame" >
      <p>Aの枠です</p>
    </div>
    <div id="ContentFrameB" class="ContentFrame" >
      <p>Bの枠です</p>
    </div>
    <!-- 中略... -->
  </div>

ContentFrame クラスの設定は下記になります。
width,height 64ピクセルの正方形の枠として表示します。transition-duration, transition-timing-function プロパティを設定し、スタイルが変化した際にはアニメーションする設定とします。
hover疑似タグを記述し、マウスポインタが枠内に入った際のスタイルを指定します。transform: scale(1.2,1.2) を記述し縦方向、横方向に1.2倍に拡大します。

.ContentFrame {
  width: 64px;
  height: 64px;
  background-color:#ffd9a4;
  font-size:0.75rem;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

  .ContentFrame:hover {
    transform: scale(1.2,1.2);
  }

外側の枠は justify-content: space-around; を指定して中の枠を等間隔に配置する設定にしています。justify-content の設定はこちらの記事を参照して下さい。

.ContentsFrame {
  width: 600px;
  height: 120px;

  border: 1px solid #ff6a00;
  padding-top: 2rem;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}