CSS Animationビジュアライザー
コントロールを動かして@keyframesアニメーションを調整。再生・停止ボタンで動きを確認しながらCSSをコピーして使えます
animation-name
animation-timing-function
animation-fill-mode
▐▐ 停止中 🎬
CSS
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.card {
animation: fadeIn 1000ms ease 0ms 1 forwards;
}使い方
- animation-name でアニメーションの種類を選ぼう
- duration・timing-function・delay・iteration-count・fill-mode を調整して動きの違いを確認しよう
- 「📋 CSSをコピー」ボタンでコードをコピーして、自分のスタイルシートに貼り付けよう！
@keyframes の書き方を理解する
CSS animation は @keyframes でアニメーションの「台本」を定義し、要素に適用する2ステップで動く。
from（0%）と to（100%）の間に中間地点（25%, 50% など）を追加すれば、複雑な動きも作れる。
6つのプロパティを整理
- animation-name — @keyframes の名前を指定。
- animation-duration — 1回の再生時間。短すぎると見えない、長すぎるとだるい。0.3s〜1s が多い。
- animation-timing-function — 緩急。ease / linear / cubic-bezier()。
- animation-delay — 開始までの待ち時間。要素を順番に表示する「スタガー」演出に使う。
- animation-iteration-count — 繰り返し回数。infinite で無限ループ。
- animation-fill-mode — 終了後の状態。forwards で最終フレームの状態を維持。
Webサイトでの使いどころ
- ローディングスピナー —
rotateを infinite で回し続ける。最も基本的な animation の使い方。 - スクロールで要素がフェードイン — Intersection Observer でクラスを付与 → animation が発火。
- 通知バッジのバウンス — 新着があるときにバッジが跳ねる。ユーザーの注意を引く。
よくある質問
- Q. animation が1回しか再生されない
animation-iteration-count: infiniteを指定していないか確認。デフォルトは1回だけ。- Q. animation 終了後に元に戻ってしまう
animation-fill-mode: forwardsを追加すると、最終フレームの状態を維持できる。