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

最終更新日: 公開日: 2022年07月

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

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>
 

Contact

ご質問等ありましたら,お手数ですが弊社の個人情報保護方針をお読み頂いた上でフォームからお願い致します.

 
   
contact
Pagetop