WebサイトやLPを「良く見せたい」「ユーザーの視線を引きつけたい」
──そんな時に役立つのが CSSアニメーション です。
今回は、コピペでそのまま使える “CSSアニメーション集10選” をまとめました。
すべて JavaScriptなし／CSSのみで実装可能 なので、ページを軽く保ちながら動きのあるデザインを簡単に取り入れることができます。
見出し・ボタン・通知・背景など、様々なシーンで使えるバリエーションを厳選したので、ぜひ制作に役立ててください。
タイピングエフェクト
See the Pen タイピングエフェクト by et (@eito-oda) on CodePen.
JavaScriptを使わず、CSSのみで作成したタイピングエフェクトです。
@keyframesとsteps()を組み合わせることで、文字が一文字ずつ現れるような打ち込み動作を再現しています。
また、右端の縦線（カーソル）もborder-rightと点滅アニメーション（blink）で表現しており、まるで実際に入力しているかのような自然な動きを演出できます。
コードもシンプルで軽量なため、見出しやキャッチコピーなどに動きを加えたいときに手軽に使えるエフェクトです。
文字が徐々に表示されるマスクアニメーション
See the Pen 文字が徐々に表示されるマスクアニメーション by et (@eito-oda) on CodePen.
文字をただ表示するだけでなく 「動き」や「演出」を加えることで、ユーザーの目を引き、印象に残る表現が可能です。そのひとつが マスクアニメーション です。
今回のサンプルでは、文字の上にグラデーション背景を重ね、CSS アニメーションで徐々に背景の位置を変化させることで、文字がスムーズに現れる演出を実現しています。background-clip: text と color: transparent を組み合わせることで、文字自体がマスクのように機能し、滑らかに表示されるのが特徴です。
この手法は 見出しやキャッチコピー に使うと効果的で、ページの導入部分や特定の強調ポイントに動きを付けるだけで、印象的でモダンなデザインを簡単に作れます。CSS だけで実装できるため、JavaScript を使わず軽量に表現できるのも大きな利点です。
チェックマークがポップアップして出現するアニメーション（成功アイコン）
See the Pen Untitled by et (@eito-oda) on CodePen.
ユーザーに操作完了や成功を視覚的に伝える際、チェックマークのアニメーションは非常に効果的です。
今回のサンプルでは、緑色の円枠がポンッと拡大して現れ、その後にチェックマークがフェードインする動きを CSS だけで表現しています。
- 円形は
scaleアニメーションで拡大し、ポップアップ感を演出 - チェックマークは擬似要素を使い、円の拡大後に
opacityを変化させて表示 - アニメーションの順序とタイミングを工夫することで、「成功した！」という視覚的フィードバックを自然に与えることが可能
この手法は、フォーム送信や保存完了などの UI フィードバックに適しており、JavaScript を使わず CSS だけで軽量に実装できるのが大きな利点です。
グラデーションのスムーズな色変化（背景フェード）
See the Pen グラデーションのスムーズな色変化（背景フェード） by et (@eito-oda) on CodePen.
ページ全体の印象を華やかにし、ユーザーの目を引く演出として非常に効果的です。
今回のサンプルでは、複数の色を持つ線形グラデーションを background-position のアニメーションでスムーズに変化させることで、背景が徐々に色を変えていく「フェードするグラデーション」を表現しています。
background-size: 600% 600%でグラデーションを大きく設定し、動きに奥行きを演出@keyframes gradShiftで背景の位置を左右にスライドさせ、色が自然に移り変わるように見せる- CSS だけで無限ループのアニメーションが可能で、軽量かつ滑らかな表現ができる
この手法は ヒーローセクションの背景 や ボタン・カードの装飾 にも応用可能で、単色背景では得られない動的でリッチなビジュアルを簡単に実現できます。
ブロブ（blob）がゆっくり形を変えるアニメーション
See the Pen ブロブ（blob）がゆっくり形を変えるアニメーション by et (@eito-oda) on CodePen.
目を引く動きのあるオブジェクトとして人気のあるのが ブロブ（blob）アニメーション です。
今回のサンプルでは、グラデーションを持つ円形に近いオブジェクトが、border-radius の値をゆっくり変化させることで、自然に形を変えていく「有機的な変形」を表現しています。
border-radiusを keyframes で変化させ、0% → 50% → 100% で繰り返すことで、滑らかに形状が変化ease-in-outを使うことで、変形が自然で柔らかい動きにfilter: drop-shadowによって立体感や奥行きを加え、よりリッチなビジュアルを演出
この手法は、背景デザインや装飾、ヒーローセクションのアクセントとして効果的で、JavaScript を使わずに軽量で滑らかなアニメーションを実装できるのが大きなメリットです。
注意を引く「パルスバッジ」（通知バッジの脈動）
See the Pen 注意を引く「パルスバッジ」（通知バッジの脈動） by et (@eito-oda) on CodePen.
ユーザーの視線を自然に誘導したいときに効果的なのが、この「パルスバッジ」。
数字が入った丸いバッジが“脈を打つように”膨らんで縮むことで、通知の存在をさりげなくアピールできます。
派手すぎず、それでいて確実に目に入るため、UIのアクセントとして非常に使いやすいアニメーションです。
このサンプルでは、box-shadow を使った波紋エフェクトと、transform: scale() の拡大縮小を組み合わせて、柔らかく呼吸するような動きを表現しています。
特に、ECサイトのカート通知やメッセージアプリの未読数など、ユーザーが「見落としてほしくない情報」を伝える場面で活躍します。
テキストのマルチカラーウェーブ（文字ごとに波が流れる）
See the Pen テキストのマルチカラーウェーブ（文字ごとに波が流れる） by et (@eito-oda) on CodePen.
文字が順番に上下へ揺れながら色が切り替わる「マルチカラーウェーブ」は、見出しや強調したいフレーズに動きを与えるのに最適なアニメーションです。
一つひとつの文字に個別の animation-delay を設定することで、波が流れるように連続して動く“リズム感”を演出しています。
今回のサンプルでは、文字がふわっと浮き上がるタイミングでカラーが変化し、視覚的にも滑らかで印象に残る表現を実現。
ブログのタイトル、ランディングページのキャッチコピー、プロダクト説明文など、ユーザーの注意を引きたい場面で抜群の効果を発揮します。
CSSだけで実装でき、JavaScript不要なのも嬉しいポイント。デザインにちょっとした遊び心を加えたいときに、手軽に導入できるアニメーションです。
複数レイヤーのパララックス（ホバーで擬似パララックス）
See the Pen 複数レイヤーのパララックス（ホバーで擬似パララックス） by et (@eito-oda) on CodePen.
複数のレイヤーを奥行き方向に配置し、ホバー時にそれぞれが異なる動きをすることで立体的なパララックス効果を再現するアニメーションです。
マウスを乗せるだけで背景・中間・前景の3層がふわっとズレて動き、奥行きを感じるビジュアルに仕上がります。
CSS だけで実現できるため軽量で、カードUIや見出し、作品紹介など「少し動きを加えて印象を強めたい」場面に最適です。
円形のロードバー（回転するローディングリング）
See the Pen 円形のロードバー（回転するローディングリング） by et (@eito-oda) on CodePen.
円形のバーがぐるりと回転し続ける、シンプルで汎用性の高いローディングアニメーションです。
リング状の線が一定速度で回ることで「読み込み中」や「処理中」であることを直感的に伝えます。
CSS だけで軽量に実装でき、Webアプリ・フォーム送信・データ処理画面など、あらゆる場面で使える定番の UI パターンです。
上下にバウンドするボタン
See the Pen 上下にバウンドするボタン by et (@eito-oda) on CodePen.
ボタンが上下にふわっと弾むように動くアニメーションです。
一定リズムで小さくバウンドすることで、ユーザーの視線を自然に誘導し、クリックを促す効果があります。
CSS のみで実装でき、CTAボタン・申し込みボタン・次へ進む誘導など、注目させたい UI に最適です。
まとめ
CSSだけでも、ここまで多彩で印象的なアニメーションを作ることができます。
小さな動きをひとつ加えるだけで、サイト全体のクオリティは大きく向上し、ユーザー体験も豊かになります。
今回紹介したアニメーションはどれも 軽量・シンプル・汎用性が高い ものばかりです。
動きのあるレイアウトを少し加えるだけでも、サイト全体の雰囲気がぐっと明るくなることがあります。
ぜひ、制作されているプロジェクトの中で、合いそうな場面があれば取り入れてみてください。
