GODRICH
#cssアニメーション#ボタン#ローディング#トランジション#スクロール#ダッシュボード#実用ui#デザイントレンド

CSS キーフレーム アニメーション 9選 — 一行でコピペOK

· Godrich · 9種 · 10分で読める

フィードバックSCSSCSSのみ自動再生CTAボタン

CSS キーフレーム アニメーションは、@keyframesで定義した一連の変化をクラス名ひとつにまとめ、任意の要素へそのまま適用する書き方です。浮く・跳ねる・回る・脈打つ・揺れる・ぐらつく・点滅する・鼓動する・ぷるぷるする、9種類をtransformとopacityの2プロパティだけで組みました。

ふわふわ浮く01 basic-keyframe-motions-float-updown 跳ねる02 basic-keyframe-motions-bounce 回転03 basic-keyframe-motions-spin パルス04 basic-keyframe-motions-pulse 揺れる05 basic-keyframe-motions-shake ぐらぐら06 basic-keyframe-motions-wobble 点滅07 basic-keyframe-motions-flash 鼓動08 basic-keyframe-motions-heartbeat ぷるぷる09 basic-keyframe-motions-jelly

自動再生 · タイルを押すとその項目へ · すべて1つのzip

9つは名前の五十音順ではなく、要素が画面でどんな役割を担うかという順序で並べました。まず存在をそっと伝え(01・02)、次に進行中だと示し(03・04)、続けて注意を引き(05・06)、最後に状態が変わったことを知らせます(07〜09)。下の表で「css アニメーション 基本」の形を見渡してから、各項目の下でコードを確認してください。ここの9つが要素そのものを動かすのに対し、枠線だけが動くパターンはCSS 枠線 アニメーション 9選に、入力欄にフォーカスが入った瞬間の反応はCSS 入力フォーム フォーカスアニメーション9選に、それぞれ別にまとめています。

クラス 動くプロパティ duration 繰り返し
.a-float translateY 3秒 無限
.a-bounce translateY 1秒 無限
.a-spin rotate 1秒 無限
.a-pulse scale・opacity 2秒 無限
.a-shake translateX 0.5秒 1回(トリガー)
.a-wobble translateX・rotate 1秒 無限
.a-flash opacity 1秒 無限
.a-heartbeat scale 1.2秒 無限
.a-jelly scaleX・scaleY 0.6秒 1回(トリガー)

01ふわふわ浮く

translateYが往復する幅

.a-floatを付けると、translateYが0から-16pxのあいだをease-in-outでゆっくり往復するので、要素が宙に浮いているように見えます。イラストやアイコンバッジのように常に表示され続ける要素に使い、3秒という長めの周期で目に留まりすぎないようにしています。

ふわふわ浮く
新しいタブで開く

01 · ふわふわ浮く — 計測 累積面積 4.311% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

translateYease-in-out3초

常に表示される要素に

$duration: 3s;
$easing: ease-in-out;

.a-float { animation: float $duration $easing infinite; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

02跳ねる

床で弾むようなイージング

.a-bounceはtranslateYを短く沈めてから大きく跳ね上げるcubic-bezierイージングで動き、床でボールが弾むような緩急を作ります。スクロール誘導の矢印や「もっと見る」アイコンのように、押せる場所だと動きで示したいときに向いています。

跳ねる
新しいタブで開く

02 · 跳ねる — 計測 累積面積 0.997% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

translateY바운스 이징1초

押せる場所だと動きで示す

$duration: 1s;
$easing: cubic-bezier(.28, .84, .42, 1);

.a-bounce { animation: bounce $duration $easing infinite; }

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-4px); }
  55%      { transform: translateY(10px); }
  75%      { transform: translateY(-2px); }
  90%      { transform: translateY(4px); }
}

03回転

「css アニメーション 無限ループ」の基本形

.a-spinはrotateを0度から360度までlinearで回すだけの汎用クラスで、ローディングスピナーに限らず更新ボタンや同期アイコンにもそのまま付けられます。イージングを挟まず一定速度で回すので、一周ごとの継ぎ目が目立ちません。

回転
新しいタブで開く

03 · 回転 — 計測 累積面積 0.233% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

rotatelinear1초

継ぎ目が目立たない理由

$duration: 1s;
$easing: linear;         // 一定速度なので継ぎ目が目立たない

.a-spin { animation: spin $duration $easing infinite; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

04パルス

scaleとopacityを同時に揺らす

.a-pulseはscaleを1から1.06のあいだ、opacityも1から0.92のあいだで同時に揺らし、レイアウトを崩さずに視線だけを引きます。ライブ状態のドットや強調したいCTAボタンのように、目立たせたいが主張しすぎたくない場面に向いています。

パルス
新しいタブで開く

04 · パルス — 計測 累積面積 7.199% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

scaleopacity2초

主張しすぎない強調に

$duration: 2s;
$easing: ease-out;

.a-pulse { animation: pulse $duration $easing infinite; }

@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.06); opacity: .92; }
}

05揺れる

0.5秒で自ら止まる単発クラス

.a-shakeはtranslateXを左右に6回短く往復させて0.5秒で自ら止まる単発クラスで、ループしません。フォームのエラー専用ではなく、新機能バッジを揺らす、チュートリアルで特定の箇所を指し示すといった汎用的な注意喚起に使います。

揺れる
新しいタブで開く

05 · 揺れる — 計測 累積面積 0.845% · 動いたフレーム 6/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

translateX6회 왕복0.5초

エラー専用ではない使い道

$duration: 500ms;
$easing: cubic-bezier(.36, .07, .19, .97);
$amount: 8px;

.a-shake.is-shaking { animation: shake $duration $easing 1; }

@keyframes shake {
  10%, 90% { transform: translateX($amount * -.5); }
  20%, 80% { transform: translateX($amount); }
  30%, 70% { transform: translateX($amount * -1); }
  40%, 60% { transform: translateX($amount * .7); }
  50%      { transform: translateX($amount * -.7); }
}

06ぐらぐら

05の揺れより不規則になる理由

.a-wobbleはtranslateXとrotateを同じ@keyframesの中でタイミングをずらして重ね、05の揺れより不規則で生きた動きになります。ドラッグできるカードや並べ替え中のリスト項目が「動かせます」と伝えたいときに向いています。

ぐらぐら
新しいタブで開く

06 · ぐらぐら — 計測 累積面積 2.026% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

translateX+rotate다단 keyframes1초

並べ替え中のリスト項目に

$duration: 1s;
$easing: ease-in-out;

.a-wobble { animation: wobble $duration $easing infinite; }

@keyframes wobble {
  0%, 100% { transform: translateX(0)    rotate(0deg); }
  15%      { transform: translateX(-6px) rotate(-4deg); }
  30%      { transform: translateX(5px)  rotate(3deg); }
  45%      { transform: translateX(-4px) rotate(-2deg); }
  60%      { transform: translateX(3px)  rotate(2deg); }
  75%      { transform: translateX(-2px) rotate(-1deg); }
}

07点滅

完全には消さない点滅

.a-flashはopacityを1→0→1の順で2回区切って点滅させ、要素を完全には消さずに確実に目を引きます。緊急の告知アイコンやライブ配信中を示すドットのように、はっきり点滅させたい場所で使います。

点滅
新しいタブで開く

07 · 点滅 — 計測 累積面積 0.15% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

opacity2단 점멸1초

緊急の告知アイコンに

$duration: 1s;
$easing: ease-in-out;

.a-flash { animation: flash $duration $easing infinite; }

@keyframes flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75%      { opacity: .15; }
}

08鼓動

ドッ・ドッ・休みのリズム

.a-heartbeatはscaleを短く2回弾ませたあと休む「ドッ・ドッ・休み」のリズムで@keyframesを区切り、均等な繰り返しより実際の心拍に近い間隔で動きます。いいねアイコンの待機状態やダッシュボードの監視ドットに向いています。

鼓動
新しいタブで開く

08 · 鼓動 — 計測 累積面積 0.356% · 動いたフレーム 19/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

scale 2단불균등 리듬1.2초

ダッシュボードの監視ドットに

$duration: 1.2s;
$easing: ease-in-out;

.a-heartbeat { animation: heartbeat $duration $easing infinite; }

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.24); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.18); }
  70%      { transform: scale(1); }
}

09ぷるぷる

scaleXとscaleYを逆方向へ

.a-jellyはscaleXとscaleYを互いに逆方向へずらして動かし、押された瞬間にゼリーのように揺れてから元の形に戻ります。カート追加の完了アイコンやクリック後に弾むボタンのフィードバックに使います。

ぷるぷる
新しいタブで開く

09 · ぷるぷる — 計測 累積面積 7.007% · 動いたフレーム 10/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

scale(1.25, .75) 어긋남젤리 이징0.6초

カート追加の完了アイコンに

$duration: 600ms;
$easing: cubic-bezier(.68, -0.55, .27, 1.55);

.a-jelly.is-jellying { animation: jelly $duration $easing 1; }

@keyframes jelly {
  0%   { transform: scale(1, 1); }
  20%  { transform: scale(1.25, .75); }
  40%  { transform: scale(.75, 1.25); }
  60%  { transform: scale(1.15, .85); }
  80%  { transform: scale(.95, 1.05); }
  100% { transform: scale(1, 1); }
}

CSSのanimationショートハンドはなぜこの順番なのか

8つの値の並び順

animation:の1行に値をまとめて書くとき、順番を覚えていないとdurationとdelayを取り違えがちです。MDNのanimationショートハンドが示す順番は次のとおりです。

順番 プロパティ この記事の例 既定値
1 animation-name float none
2 animation-duration 3s 0s
3 animation-timing-function ease-in-out ease
4 animation-delay (省略時0) 0s
5 animation-iteration-count infinite 1
6 animation-direction (省略時normal) normal
7 animation-fill-mode (省略時none) none
8 animation-play-state (省略時running) running

fill-modeが決めること

animation-fill-modeは、再生の前後にキーフレームの値を保つかどうかを決めます。MDNのanimation-fill-modeがまとめる4つの値は次のとおりです。

値 効果
none 既定。再生前後とも元のスタイルのまま
forwards 再生が終わったあと、最後のキーフレームの値を保つ
backwards animation-delayのあいだ、最初のキーフレームの値を先に適用する
both forwardsとbackwardsの両方を適用する

05と09にfill-modeが要らない理由

05の揺れと09のぷるぷるは1回で再生を終えますが、どちらも0%と100%が元の形と同じなので、fill-modeを指定しなくても自然に定位置へ戻ります。最後のキーフレームが元の見た目と違う場合は、forwardsを足さないと再生後の形が戻ってしまいます。

どこで壊れるか — 落とし穴

クラスを重ねると片方しか動かない

.a-floatと.a-spinのように別々のユーティリティクラスを同じ要素へ重ねて付けると、どちらもanimationショートハンドを丸ごと宣言しているため、CSSのカスケード規則で後に書かれたクラスが先のクラスを完全に上書きし、片方しか動きません。ひとつの要素へ2つの動きを重ねるには、animation-name: float, spin;のように名前をカンマで並べ、animation-durationやanimation-timing-functionも同じ数だけ並べる必要があります。両方が同じプロパティ(transform)を動かす場合は既定のreplaceが互いを上書きするため、animation-composition: addを指定すると2つのtransform値を足し合わせて両方を反映できます。

単発アニメーションの計測値

05の揺れと09のぷるぷるは一度きりで止まる単発アニメーションで、24フレームの計測のうちそれぞれ6フレーム・10フレームしか動きが記録されませんでした。この2つは9つの中でも可動時間が際立って短いのに、変化の強度の平均値はぷるぷるの方が9つの中でいちばん高く出ています。短い動きほど地味になるとは限らないと、実際に組んで測るまでわかりませんでした。この違いも含めた9ファイルの解凍パスワードはnft4q6u2で、下のカードから受け取れます。

05や09のような単発の動きが短くても伝わるのは軌道が整っているからで、逆に線そのものをわざと揺らした質感がほしい場面もあります。ここと同じ2つのプロパティだけでその手触りを出した例が、手書き風 デザイン LPキットのクレヨン風セクション9選です。

アクセシビリティ

動きだけを止めて情報は残す

動作を減らす設定を有効にしているユーザーのために、9つとも@media (prefers-reduced-motion: reduce)の中でanimation: noneに切り替えます。動きだけを止めて情報は残すのが原則で、9つとも静止した状態のまま内容自体は変わらず読めます。このメディアクエリをどのブラウザが読み取るかは、MDNのprefers-reduced-motionのドキュメントにある対応表で確認できます。

@media (prefers-reduced-motion: reduce) {
  .a-float, .a-bounce, .a-spin, .a-pulse,
  .a-wobble, .a-flash, .a-heartbeat { animation: none; }
  .a-shake.is-shaking, .a-jelly.is-jellying { animation: none; }
}

次に読む

「css アニメーション 作り方」をもっと知りたいときはCSSアニメーションのカテゴリーに、このサイトの成り立ちは紹介ページにまとめています。

FAQ

「css アニメーション コピペ」で集めた9つを1つの画面に全部使ってもいいですか？

入れること自体はできますが、1画面には2〜3個までにとどめるのがおすすめです。04のパルスと07の点滅のように、どちらも「注目して」という信号を持つクラスを同じ画面に何個も置くと、どれも特別に見えなくなります。03の回転と08の鼓動のように状態が異なるもの同士なら、並んでいても違和感はありません。1画面で動かす対象をアイコン1つに絞りたいときは、要素全体ではなくSVGの線を動かすCSS アイコン アニメーション 9選のほうが静かに収まります。

2つのアニメーションを1つの要素に重ねるにはどうすればいいですか？

クラスを2つそのまま付けるだけでは、後に書いたクラスのanimationがすべてを上書きしてしまい片方しか動きません。animation-nameにカンマ区切りで名前を並べ、同じプロパティを動かす場合はanimation-composition: addやaccumulateで合成する方法を使ってください。具体的な例は落とし穴のセクションにあります。

Reactではクラスの切り替えをどう扱いますか？

zipのreact/フォルダの各コンポーネントは、duration・easing・colorをpropsで受け取ってCSS変数へ渡す作りです。05の揺れと09のぷるぷるのように一度きりで止まるものは、useStateでクラスをオンにし、onAnimationEndでオフに戻すことで、もう一度クリックしたときにも再生されるようにしています。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。