AnimLabo

ホバーやクリック時のアニメーションを、実際の動きとコード例で紹介しています。
コーディングの参考やアイデア探しにご活用ください。トリガーとしてスクロールを利用しているだけのものは、JavaScript利用としてカテゴライズはしておりません。
あくまで動きにJavaScriptが絡んでくるかどうかで振り分けしています。

セクション間を波で繋ぐアニメーション

• スーッと系
• 背景
• 常時
• CSSのみ

単語カードのようにめくれるボタン

• クルッと系
• ボタン
• ホバー
• CSSのみ

ホバーするとぬるっと動くリスト

• ちょこっと反応系
• 一覧
• ホバー
• CSSのみ

ホバーすると大きくなる一覧

• ドーン/ギュッ系
• 一覧
• ホバー
• JavaScript

ウェーブするテキスト

• スーッと系
• テキスト
• スクロール
• CSSのみ

順番に下から出てくるテキスト

• スーッと系
• テキスト
• スクロール
• CSSのみ

波紋のようなアニメーション

• フワッと系
• 背景
• 常時
• CSSのみ

ホバーすると丸が表示されるボタン

• ドーン/ギュッ系
• ボタン
• ホバー
• JavaScript

円形プログレスカウンター

• スーッと系
• カウンター
• ロード時
• JavaScript

オーバーレイされて出てくる画像

• ドーン/ギュッ系
• 画像
• スクロール
• CSSのみ

ぬるっと出てくるテキスト

• スーッと系
• テキスト
• スクロール
• CSSのみ

枠から描画されるテキスト

• フワッと系
• テキスト
• スクロール
• CSSのみ

下線が引かれるテキスト

• ちょこっと反応系
• テキスト
• ホバー
• CSSのみ

上書きされていくテキスト

• フワッと系
• テキスト
• クリック
• JavaScript

ロールするテキスト

• スーッと系
• テキスト
• 常時
• CSSのみ

むにゅっと出てくるボタン

• ビヨン系
• ボタン
• スクロール
• CSSのみ

矢印がスライドするボタン

• ちょこっと反応系
• スーッと系
• ボタン
• フォーカス
• ホバー
• CSSのみ

立体的なボタン

• ちょこっと反応系
• ボタン
• フォーカス
• ホバー
• CSSのみ

ドットが跳ねるテキスト

• ビヨン系
• テキスト
• 常時
• CSSのみ