CSSアニメーション
エンジニアのためのWebチートシート
汎用的なCSSアニメーションのチートシートです。入場・退場・注目・変形・特殊効果・継続・ローディング・ホバーなど、様々なアニメーションをライブプレビューで確認できます。
入場アニメーション
Fade In
透明から不透明にフェードイン
Fade In Up
下から上にフェードイン
Fade In Down
上から下にフェードイン
Fade In Left
左からフェードイン
Fade In Right
右からフェードイン
Slide In Up
下からスライドイン
Slide In Down
上からスライドイン
Slide In Left
左からスライドイン
Slide In Right
右からスライドイン
Zoom In
拡大しながら表示
Zoom In Up
下から拡大しながら表示
Zoom In Down
上から拡大しながら表示
Roll In
回転しながら入場
Back In Up
下から勢いよく入場
Back In Down
上から勢いよく入場
退場アニメーション
Fade Out
不透明から透明にフェードアウト
Fade Out Up
上にフェードアウト
Fade Out Down
下にフェードアウト
Fade Out Left
左にフェードアウト
Fade Out Right
右にフェードアウト
Slide Out Up
上にスライドアウト
Slide Out Down
下にスライドアウト
Slide Out Left
左にスライドアウト
Slide Out Right
右にスライドアウト
Zoom Out
縮小しながら消失
Roll Out
回転しながら退場
注目アニメーション
Bounce
バウンドする効果
Shake X
横に揺れる効果
Shake Y
縦に揺れる効果
Pulse
拡大縮小を繰り返す脈動効果
Swing
振り子のように揺れる
Flash
点滅する効果
Tada
注目を集める派手な効果
Jello
ゼリーのように揺れる
Head Shake
首を振るような動き
Wobble
ぐらぐら揺れる効果
Rubber Band
ゴムのように伸び縮み
Heartbeat
心臓の鼓動のような効果
変形アニメーション
Rotate 90°
90度回転
Rotate 180°
180度回転
Rotate 360°
360度回転
Flip X
X軸で反転
Flip Y
Y軸で反転
Skew X
X軸方向に傾斜
Skew Y
Y軸方向に傾斜
Scale Up
拡大する
Scale Down
縮小する
Squeeze
押しつぶされる効果
特殊効果
Blur In
ぼかしからシャープに
Blur Out
シャープからぼかしに
Glow
発光効果
Shadow Drop
影が落ちる効果
Ripple
波紋効果
Gradient
グラデーションアニメーション
Border
ボーダーアニメーション
Clip Path
クリッピングマスク効果
継続アニメーション
Spin
継続的に回転
Float
浮遊する効果
Ping
ピング効果
Bounce Loop
継続的にバウンド
Breathe
呼吸するような効果
Sway
ゆらゆら揺れる
Pendulum
振り子のように揺れる
Wave
波打つ効果
ローディング
Spinner
回転するローダー
Dots
ドットのローダー
Pulse Loader
脈動するローダー
Bar
バー型ローダー
Skeleton
スケルトンローダー
Progress
プログレスアニメーション
ホバーエフェクト
Grow
ホバーで拡大
Shrink
ホバーで縮小
Rotate
ホバーで回転
Lift
ホバーで浮き上がる
Shadow
ホバーで影が出現
Glow
ホバーで発光
Underline
ホバーで下線
Border
ホバーでボーダー
Icon Slide
アイコンがスライド
Color Shift
ホバーで色変化
Related Cheatsheets
- 画像エフェクト-CSSで実現できる画像エフェクトのチートシートです。filter、clip-path、blend-modeなどを使った視覚効果と、AI画像生成用のプロンプト例をまとめました。
- テキストアニメーション-CSSで実現できるテキストアニメーションのチートシートです。フェードイン、スライド、タイプライター、グリッチ、ネオン効果など、様々なテキストエフェクトをライブプレビューで確認できます。
- ローディングアニメーション-CSSで実現できるローディングアニメーションのチートシートです。スピナー、ドット、パルス、バー、スケルトン、プログレスバーなど、様々なローディング表現をライブプレビューで確認できます。
- UX心理学-UXデザインに活用できる心理学の法則・原則をまとめたチートシートです。認知・知覚、意思決定バイアス、行動心理、社会心理など、ユーザー体験を向上させるための心理学的知見を網羅しています。
Related Goods
WebTerm - Recommended tools
WebTermは、ブラウザでLinuxコマンド・Gitコマンドを安全に実行でき、チュートリアル式で学べるターミナルサンドボックスです。
AIコーディングツールの普及に伴い、CLIの基礎知識を身につける重要性は増しています。実際のターミナルを操作するのに抵抗がある方でも、WebTermはローカル環境を壊す心配がありません。「会員登録不要・無料」で利用でき、学習環境として最適です。
WebTerm
Browser Terminal Sandbox for Learning CLI
All Cheatsheets