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

transformプロパティ（要素の変形）

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

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

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

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

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

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

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

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

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

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

事業内容

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

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

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

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

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

上下にフワフワ

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

鼓動

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

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

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

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