CSSアニメーション

2018-07-23 by Horizon Blue Owl

WEBサイトに多彩なアニメーションを用いることで効果的な演出が可能になります。

▼CSSアニメーションサンプル（12種）紹介

　カーソル（矢印）をのせたときにコンテンツの背景色が変化します。

　カーソル（矢印）をのせたときにコンテンツが横から伸びます。

　カーソル（矢印）をのせたときにコンテンツが拡大します。

　カーソル（矢印）をのせたときにコンテンツが回転します。

　カーソル（矢印）をのせたときにコンテンツが光るように色が変化します。

　常にページの上部に表示されるメニュー等を固定ヘッダといいます。

　cssで白い丸を動かし、雪が風ているような演出ができます。

　ハンバーガーメニューとはスマートフォン（SP）でよく目にするメニューのことです。クリックするとメニュー、コンテンツが表示されます。

　コンテンツが動きながら出てきてバウンドしてから止まります。

　コンテンツが点滅しながら表示されます。

　コンテンツが左右に震えて表示されます。

　コンテンツが振り子のように揺れながら表示されます。

　マウスでブロックを触ると回転します。

　背景のグラデーションが自動的に変化します
　ハンバーガーメニューの開閉が立体的なアニメーション