アニメーションサンプル集
CSSアニメーションの動きを一覧で確認できるページです。コードを見るボタンからHTML/CSSコードをコピーできます。
フェードイン
要素が徐々に表示されるアニメーション
使用イメージ: ページ読み込み時の要素表示
下からフェードイン
下からスライドしながらフェードイン
使用イメージ: スクロール時の要素出現
上からフェードイン
上からスライドしながらフェードイン
使用イメージ: ドロップダウンメニュー
ぽんっと表示
バウンスしながら拡大表示
使用イメージ: ボタンクリック時のフィードバック
ゆらゆら
左右に揺れるアニメーション
使用イメージ: 注意喚起アイコン
点滅
透明度を変化させて点滅
使用イメージ: 警告表示
回転
360度回転するアニメーション
使用イメージ: ローディングアイコン
拡大縮小
サイズを変化させるアニメーション
使用イメージ: ホバー時の強調
テキストアニメーション
ふわっと表示
テキストがふわっと表示されるアニメーション
Sample Text
使用イメージ: 見出しやキャッチコピーの表示
文字間隔が広がる
文字間隔が広がりながら表示されるアニメーション
Sample Text
使用イメージ: タイトルや重要なキーワード
タイピング風
テキストがタイプされるように表示されるアニメーション
Sample Text
使用イメージ: イントロやキャッチコピー
きらっと表示
光がきらっと走るような表現のアニメーション
Sample Text
使用イメージ: リボンや特典の強調
一文字ずつ表示
文字が一文字ずつ現れていくアニメーション
S a m p l e T e x t
使用イメージ: ヘッダーや導入文の演出
波打つ文字
テキストが波のように揺れるアニメーション
S a m p l e T e x t
使用イメージ: ロゴやセクション見出し
グリッチ風
画面が歪んだようなグリッチ風のアニメーション
Sample Text
使用イメージ: ゲームやテック系コンテンツ
ネオン風
ネオン風の光るテキストアニメーション
Sample Text
使用イメージ: バナーや強調見出し
ぷるぷる
小刻みに揺れてぷるぷるするアニメーション
Sample Text
使用イメージ: 注意喚起やエラー表示