【CSS】簡単なアニメーションの作り方【transition】

アニメーションについて少し書いてみた．続きは以下で．

• 【CSS】簡単なアニメーションの作り方【transform】
• 【CSS】簡単なアニメーションの作り方【animation】【keyframes】

CSS だけを使ってもアニメーションは作れる

ちょっとした動きが CSS だけでも実現でき，しかも滑らかに動作するので安っぽくないようにデザインを作ることが簡単になってきた．
そこで簡単に使える transition を使った例をサンプルで備忘録を兼ねて書いてみた．

transition でマウスが上に来た時(hover)に動作させる

画像を拡大する

下の画像にマウスカーソルを合わせてみると拡大される．

CSS

#zoomimage {
  overflow: hidden;  
}
#zoomimage img {
  width: auto;
  height: 100%;
  max-height: 150px;
  object-fit: contain;
  transition: all 0.6s 0.1s ease;
}
#zoomimage img:hover {
  transform: scale(1.2);
}

HTML

<div id="zoomimage" class="c">
  <img itemprop="image" loading="lazy" src="https://www.rectus.co.jp/wp/wp-content/uploads/2022/05/logo640.png" alt="株式会社レクタス" width="150" height="150" />
</div>

マウスが画像に乗った時に 1.2 倍に拡大するという簡単なアニメーションだが以下のように簡単に実現できる．

背景色を変更する

マウスが画像に乗った時にじんわり背景色がつく．例えばリンクやボタンなどに使える．

CSS

#chgbgcolor {
  padding: 6px;
  border: 1px solid black;
  transition: all 1.6s 0.1s ease;
}
#chgbgcolor:hover {
  background-color: #DDD;
}

HTML

<div id="chgbgcolor" class="c">
  マウスが上に来た時に背景を変更する
</div>

幅を伸ばす

マウスが画像に乗った時に箱が伸びる．
目立たせようとする場合に良いだろう．

CSS

#chgwide {
  padding: 6px 0;
  border: 1px solid black;
  width: 50%;
  transition: all 1.6s 0.1s ease;
}
#chgwide:hover {
  width: 100%;
}

HTML

<div id="chgwide" class="c">
  マウスが上に来た時に幅を広げる
</div>

はっきりさせる

マウスが画像に乗った時に今，選択しているものが明確に分かるようになる．

CSS

#chgclear {
  padding: 6px;
  border: 1px solid black;
  background-color: white;
  transition: all 1.6s 0.1s ease;
  opacity: 0.3;
}
#chgclear:hover {
  font-weight: bold;
  opacity: 1;
}

HTML

<div id="chgclear" class="c">
  マウスが上に来た時にはっきり分かるように変更する
</div>