更新日2019年11月22日

Web制作でよく使っているCSSアニメーションのサンプル

私がWeb制作でよく使っているCSSアニメーションのサンプルまとめです。ソースコードの詳細な説明および情報の網羅は行っていないのでご注意ください。
  • transformプロパティ(要素の変形)
  • animationプロパティ(アニメーションの動き方を指定できる)
  • 上下にフワフワ
  • 鼓動
  • 常に動いているとウザいかも

transformプロパティ(要素の変形)

transformプロパティは、要素に2D変形または3D変形を適用します。

具体的には、画像などの要素に対して回転、軸移動、拡大・縮小などができます。Web制作では、コンテンツメニューやリンク記事にマウスフォーカスしたときの要素拡大をよく見かけます。

transform: rotateX();(X軸回転)

マウスフォーカス時にX軸回転を行うサンプル。(スマホの場合はタップ時)

rotateXサンプル

transform: rotateY();(Y軸回転)

マウスフォーカス時にY軸回転を行うサンプル。(スマホの場合はタップ時)

rotateYサンプル

transform: scale();(XとY軸の拡大・縮小)

マウスフォーカス時にXとY軸の拡大を行うサンプル。(スマホの場合はタップ時)

scaleサンプル

jpgやpngなどラスタ形式の画像だと、拡大時に画像が荒れる。

scaleサンプル2

ベクタ形式のSVGファイルを用いると、拡大しても画像が荒れない。

scaleサンプル3

事業内容

縦横幅を維持したまま、中の画像だけ拡大することも可能。コンテンツメニュー画像のエフェクトとしてよく使われている。

animationプロパティ(アニメーションの動き方を指定できる)

animationプロパティは、アニメーションの時間間隔、動く方向、動き方、動いている時間などを指定できるプロパティです。

animation: ease infinite;(開始時と終了時は緩やかに変化、無限に続ける)

rotateサンプル

animation: linear infinite;(一定に変化、無限に続ける)

rotateサンプル

上下にフワフワ

アニメーションで位置を上下させる。

鼓動

アニメーションでサイズを拡大・縮小させる。

常に動いているとウザいかも

Webページ内の画像が常に動いていると、それが気になって内容が頭に入ってこない場合があるので多用は禁物です。

マウスフォーカス時にちょっとした動きを出したい場合などに用いるのが良いと思います。