準備中...
ローディング
画面遷移
グローバルナビゲーション
ハンバーガーメニュー
テキストナビゲーション
タブメニュー
スライドショー
ギャラリー
動画
ボタン
検索
ページトップリンク
ページ内リンク
スクロールボタン
アコーディオンパネル
ツールチップ
ニュースティッカー
グラフ
モーダルウィンドウ
最低限覚えておきたい動き
背景の動き
エリアの動き
画像リンクの動き
テキストの動き
イラスト・オブジェクトの動き
数字カウントアップ
プログレスバー＋数字カウントアップ
プログレスバー＋数字カウントアップ＋画面が開く
ロゴアニメーション
ロゴアウトラインアニメーション
手書き風ロゴアニメーション
同日２回目のアクセスでローディング画面非表示
背景色が伸びる（上から下）
背景色が伸びる（下から上）
背景色が伸びる（右から左）
背景色が伸びる（左から右）
背景色が伸びる（中央から外）
背景色が伸びる（中央から上下）
背景色が伸びる（斜め）
背景色が円形に縮小（中央へ）
背景色が四角に拡大（四隅へ）
ドロップダウンメニュー（上）
ドロップダウンメニュー（左）
ドロップダウンメニュー（写真付 上ナビ）
ドロップダウンメニュー（写真付 左ナビ）
スクロールすると上部に固定
スクロール途中から上部固定
スクロールするとハンバーガーメニューに変化
スクロール途中からヘッダーの高さが小さくなる
スクロール途中でヘッダーが消え、上にスクロールすると復活
スクロールすると位置が固定して追従
クリックしたらナビが上から下に出現
クリックしたらナビが下から上に出現
クリックしたらナビが左から右に出現
クリックしたらナビが右から左に出現
クリックしたら背景が全面に広がる
クリックしたら円形背景が拡大（上から）
クリックしたら円形背景が拡大（下から）
クリックしたら円形背景が拡大（右から）
クリックしたら円形背景が拡大（左から）
クリックしたら円形背景が拡大（右上から）
クリックしたら円形背景が拡大（右下から）
クリックしたら円形背景が拡大（左上から）
クリックしたら円形背景が拡大（左下から）
クリックしたら円形背景が拡大（中央から）
クリックしたらナビ背景コンテンツがぼかされる
追従メニューの現在地ハイライト
３本線が×に
２本線が×に
３本戦が１本線に
MENUがCLOSEに
MENUが×に
３本線が回転して×に
３本線が奥行きを持って回転して×に
３本線が横方向に回転して×に
３本線がジャンプして×に
中心から外に線が伸びる（下部）
中心から外に線が伸びる（中央）
左から右に線が伸びる（下部）
左から右に線が伸びる（上部）
左から右に背景が伸びる
左から右に線が伸びて背景になる
上下に線が伸びて背景になる
円が線に変化
テキストが入れ替わる
線が伸びて枠線になる
左右から線が伸びて枠線になる
横移動させて全画面で見せる
フェードイン・アウトさせて全画面で見せる
ゆっくりズームアウトさせながら全画面で見せる
動きを組み合わせて全画面で見せる
動画と組み合わせて全画面で見せる
複数画像を並列に見せる
複数画像を中央に注目させて見せる
複数画像を流して見せる
２つの画像の動きを対比させて見せる
複数画像を一覧で見せる
カテゴリ別に画像を並び替える
複合検索でカテゴリ別に画像を並び替える
サムネイルをクリックすると、メイン画像が切り替わる１
サムネイルをクリックすると、メイン画像が切り替わる２
サムネイルをクリックするとグループ化された画像一覧を表示する
画面全体に背景動画を流す
YouTubeを使って、画面全体に背景動画を流す
背景が流れる（左から右）
背景が流れる（右から左）
背景が流れる（上から下）
背景が流れる（下から上）
背景が流れる（中央から横全体）
背景が流れる（中央から縦全体）
背景が流れる（中央から外）
背景が流れる（斜め）
くるっと回転（手前に回転）
くるっと回転（奥に回転）
クリックしたら波紋が広がる
無限に波紋が広がる
波紋がふわっと広がる
押し込まれる（円が縮小）
下に押し込まれる（立体が平面に）
右下に押し込まれる（立体が平面に）
左下に押し込まれる（立体が平面に）
影がついて浮き上がる
影が拡がって浮き上がる
上に移動し影がついて浮き上がる
線から塗りに変化（上から下）
線から塗りに変化（下から上）
線から塗りに変化（左から右）
線から塗りに変化（右から左）
線から塗りに変化（中央から外）
左上と右下から枠線に伸びて塗りに１
左下→右下→左上→左下に枠線が伸びて塗りに
左上と右下から枠線が伸びて塗りに２
グラデーションが流れる
グラデーションが縮小する
グラデーションが拡大する
グラデーション線から塗りに変化する
外の線が伸びる
少し出ていた線が伸びる
下線が伸びて背景に変わる
線の上を別の線が伸びる
矢印の線がループして伸縮
塗りから線に変わる
角丸に変わる
キラっと光る
丸がボタンに変形する
表示するテキストが切り替わる
矢印が右に移動
矢印が右に移動して現在地に戻る
矢印が回転
矢印が右に移動する
矢印が右に移動して背景がつく
矢印が縮む
虫眼鏡マークをクリックすると、検索窓が伸びて出現
虫眼鏡マークをクリックすると、全画面表示で検索窓が出現
虫眼鏡マークをクリックすると、下からふわっと検索窓が出現
ページの先頭にスムーススクロール
ページの指定の高さを超えたら下から出現
ページの指定の高さを超えたら右から出現
ページ内にある指定の範囲内で下から出現
ページ内にある指定の範囲内で右から出現
ページの指定の高さを超えたら出現し、フッター手前で止まる
スクロール途中からリンクボタンの形状が変化
リンクボタンをクリックしたら形状が変化
スクロールの速さが変化
ページ内の指定の場所にスクロール
追従するヘッダー分の高さを引いて適切な場所へスクロール
縦線が動いてスクロールを促す
丸が動いてスクロールを促す
マウスが動いてスクロールを促す
矢印が動いてスクロールを促す
スクロールをするとエリアの高さに合わせて線が伸びる
スクロールをするとタイムラインの縦線が伸びる
任意の場所をクリックすると隠れていた内容が開く
任意の場所をクリックすると隠れていた内容が開き、先に開いていた内容が閉じる
数字のカウントアップ・ダウン
棒グラフ（縦）
棒グラフ（横・複数バー）
折れ線グラフ（1本）
折れ線グラフ（複数）
円グラフ
円グラフ（ドーナッツ型）
ページを開くと、背景が暗くなりテキストを表示
ページを開くと、背景が暗くなり動画を表示
リンクをクリックすると、背景が暗くなり動画や画像やテキストを表示
ふわっ（CSS）
パタッ（CSS）
くるっ（CSS）
ボンッ（CSS）
ヒュッ（CSS）
じわっ（CSS）
にゅーん（CSS）
スーッ（CSS）
シャッ（CSS）
順番に現れる（CSS）
ランダムに現れる（CSS）
順番に現れる（CSS×JS）
ランダムに現れる（CSS×JS）
背景色が時間変化
グラデーションが時間変化
流体シェイプ
幾何学模様
雪が降る
桜が散る
ホタルが舞う
紙吹雪が舞う
星がキラキラ
波打つ（1 つ 重なりなし）
波打つ（1 つ 重なりあり）
波打つ（複数 重なりなし）
波打つ（複数 重なりあり）
波線（1つ）
波線（複数）
水滴が落ちる
粒子が集まってタイポグラフィーを形成する
スクロールすると1画面移動
スクロールすると画面やエリアが時間差で重なる
スクロールすると画面分割した左右がそれぞれ動く
スクロールすると画面分割した右側が動く
スクロールすると紙芝居風に展開
スクロールすると下のエリアがヘッダーにかぶさる
スクロールするとヘッダー背景画像が拡大
画像が拡大
画像が縮小
画像が拡大＋回転
ぼかし
透過
モノクロからカラーへ
セピアからカラーへ
キラッ
波紋
背景が出現＋テキスト（下から）
背景が出現＋テキスト（上から）
背景が出現＋テキスト（左から）
背景が出現＋テキスト（右から）
背景が出現＋テキスト（中央から横に）
背景が出現＋テキスト（中央から縦に）
回転＋テキスト（X 軸）
回転＋テキスト（Y 軸）
回転＋テキスト（Z 軸）
回転＋テキスト（Z 軸2）
画像拡大（ぼかし）＋テキスト
画像縮小（ぼかし）＋テキスト
画像透過+ グラデーション＋テキスト
枠線＋テキスト
バラバラに出現
流れるように出現（左から右）
流れるように出現（右から左）
流れるように出現（上から下）
流れるように出現（下から上）
アルファベットがランダムに変化して出現
回転
ランダムに出現
じわっと出現
タイピング風に出現
1文字ずつ出現
背景色が伸びて出現（左から右）
背景色が伸びて出現（右から左）
背景色が伸びて出現（上から下）
背景色が伸びて出現（下から上）
滑らかに出現
ほのかに光りながら出現
GIFアニメーション
PNGアニメーション（APNG）
PNGアニメーション（CSS）
SVGアニメーション1
SVGアニメーション2