メイン画像をスライダーや動画にしたり、やはり動きがあると良いですよね。
今回はCSSのanimationを使って画像をゆっくり拡大させる方法をご紹介します。

animationを使って画像をゆっくり拡大させる方法

HTML
<div class="mainVisual">
  <div class="animate">
    <img src="https://www.nan-demo.work/wp-content/uploads/2022/06/image01.jpg">
  </div>
</div>

CSS
img {
  width:100%;
}

.mainVisual {
  width:100%;
  max-width:1200px;
  margin:0 auto;
  overflow:hidden;
}

.animate img {
  width: 100%;
  height: auto;
  animation: animationZoom 5s ease-in-out forwards;
}

@keyframes animationZoom {
  100% {
    transform:scale(1.1)
  } 
}

補足

・overflow:hidden;
入れないと、拡大した時にはみ出します。

・animationZoom：（animation-name）
任意で命名

・5s：（animation-duration）
秒数

・ease-in-out：（animation-timing-function）
加速してから減速

・forwards：（animation-fill-mode）
アニメーション後、最後のキーフレームのスタイルが適用されます。

スライダーとゆっくり拡大を合わせる方法

ここではswiper.jsを使用しました。

実装結果がこちら

いかがでしょうか。
メイン画像に使えそうな、画像をゆっくりと拡大させる方法でした。
是非、使ってみてください。

他にもあるよ。関連記事

• 【CSS】とにかく便利！Flexbox。その1：基本編
• HTMLのtableの文字サイズがiphoneだと大きくなる
• 【CSS】画像をテキストでマスクをかける方法