CSSアニメーション
2018-07-23 by Horizon Blue Owl
![](/public_img/idealbox/anime_css_img.jpg)
WEBサイトに多彩なアニメーションを用いることで効果的な演出が可能になります。
▼CSSアニメーションサンプル(12種)紹介
カーソル(矢印)をのせたときにコンテンツの背景色が変化します。
カーソル(矢印)をのせたときにコンテンツが横から伸びます。
カーソル(矢印)をのせたときにコンテンツが拡大します。
カーソル(矢印)をのせたときにコンテンツが回転します。
カーソル(矢印)をのせたときにコンテンツが光るように色が変化します。
6.固定ヘッダ
常にページの上部に表示されるメニュー等を固定ヘッダといいます。
cssで白い丸を動かし、雪が風ているような演出ができます。
ハンバーガーメニューとはスマートフォン(SP)でよく目にするメニューのことです。クリックするとメニュー、コンテンツが表示されます。
コンテンツが動きながら出てきてバウンドしてから止まります。
10.要素が点滅する
コンテンツが点滅しながら表示されます。
11.要素が震える
コンテンツが左右に震えて表示されます。
12.要素が揺れる
コンテンツが振り子のように揺れながら表示されます。
マウスでブロックを触ると回転します。
背景のグラデーションが自動的に変化します
ハンバーガーメニューの開閉が立体的なアニメーション
ハンバーガーメニューの開閉が立体的なアニメーション