CSSアニメーション（@keyframes）入門｜作り方と緩急の付け方
公開日：2026年10月10日 更新日：2026年9月15日 運営：シルギア（Analyzegear, Inc.） 対象ツール：CSSアニメーション（@keyframes）ジェネレーター
ボタンをふわっと浮かせたい、読み込み中にくるくる回したい、注目させたい要素を点滅させたい——Webページに小さな動きを足したい場面はよくあります。CSSアニメーションは画像や動画を使わず、CSSだけで要素を滑らかに動かせる仕組みです。このジェネレーターは、キーフレームと再生設定を画面で調整するとその場でプレビューが動き、貼り付けるだけで使えるCSSを書き出します。処理はすべてブラウザ内で完結し、外部に送信されません。ここでは、出力されるコードの読み方と考え方を、基礎から順に説明します。
@keyframesとanimationは二人三脚
CSSアニメーションは2つの部品でできています。1つは「どう変化するか」を定義する@keyframes、もう1つはそれを「いつ・どのくらいの速さで・何回」再生するかを決めるanimationプロパティです。@keyframesだけ書いても要素は動きません。animation側でその名前を呼び出して初めて再生されます。逆にanimationプロパティだけあっても、参照先の@keyframesがなければ何も起きません。この2つは常にセットで考えます。
@keyframesの中では、再生位置を0%〜100%（または開始をfrom、終了をto）で表し、各位置での見た目を書きます。0%が開始時、100%が終了時の状態です。ブラウザはその間を自動で補間して、なめらかな中間状態を作ってくれます。
実際のCSS例で読んでみる
下から少し上がりながら現れる、よくある「フェードアップ」を例にします。書き出されるコードはこんな形です。
- @keyframes fade-up {
- 0% { transform: translateY(16px); opacity: 0; }
- 100% { transform: translateY(0); opacity: 1; }
- }
- .box { animation: fade-up 0.6s ease-out 0.2s 1 normal both; }
0%では16px下にずれて透明、100%では定位置で不透明になります。animation行は左から順に、アニメーション名・再生時間(0.6秒)・変化の緩急(ease-out)・開始を遅らせる時間(0.2秒)・繰り返し回数(1回)・向き(normal)・停止位置の扱い(both)を並べたものです。時間の値が2つ並ぶときは、1つ目がduration、2つ目がdelayという順番で解釈される点に注意してください。
timing-functionで動きの緩急が決まる
timing-functionは、開始から終了までのスピード配分を決めます。同じ0.6秒でも、一定速度か、最初だけ速いかで印象が大きく変わります。
- linear：終始一定の速さ。回転など機械的な動きに向きます。
- ease：ゆっくり始まり中盤で速く、終わりでまた緩む標準的な動き。
- ease-in：じわっと始まって加速。退場（消える）動きに合います。
- ease-out：勢いよく始まって減速。登場（現れる）動きに自然です。
- cubic-bezier：4つの数値で緩急を自由に定義。プリセットで足りない微調整に使います。
回数・向き・停止位置の設定
残り3つの設定は動きの繰り返し方を決めます。まずiteration（繰り返し回数）は、1や3などの回数か、ずっと続けるinfiniteを指定します。読み込みスピナーはinfinite、登場演出は1回が基本です。
direction（向き）は再生方向です。normalは毎回0%→100%、reverseは逆再生、alternateは往復（0→100→0…）、alternate-reverseはその逆から往復です。脈打つpulseのような動きは、alternateにすると折り返しが自然になります。
fill-mode（停止位置の扱い）は、再生前と再生後にどの状態を保つかを決めます。noneは再生前後で元のスタイルに戻ります。forwardsは終了後に100%の状態で止まり、backwardsはdelay中に0%の見た目を先取りし、bothは両方を適用します。「現れて、そのまま留まってほしい」ときはbothかforwardsを指定します。これを忘れると、フェードイン後に要素が一瞬で消えたように見える失敗が起こります。
transformとopacityが軽い理由
このツールがtransform（移動・拡大・回転）とopacity（不透明度）を中心に扱うのには理由があります。要素の位置をleftやtop、幅をwidthで動かすと、ブラウザはレイアウトの再計算（リフロー）と描画のやり直し（リペイント）を毎フレーム行い、負荷が高くなります。一方、transformとopacityはレイアウトや描画をやり直さず、合成（コンポジット）だけで処理でき、多くの環境でGPUに任せられます。そのため動きがカクつきにくく、スマホでも滑らかに保ちやすいのです。左に動かしたいときもleftではなくtranslateX、大きさを変えたいときもwidthではなくscaleを使うのが定石です。背景色の変化は描画を伴いますが、単発なら実用上問題になりにくい範囲です。
よくある失敗と使いどころ
つまずきやすい点を挙げます。
- infiniteの動きを画面中で多用する：常時動く要素が多いと注意が散り、CPUも消費します。ループは1〜2か所に絞りましょう。
- durationが長すぎる：UIの反応は0.2〜0.6秒程度が心地よく、1秒を超えると重く感じられます。
- fill-modeの指定漏れ：登場後に留めたいのにnoneのまま、という取り違えが起きがちです。
使いどころは、ボタンやカードの登場、通知バッジの脈動、読み込み中の回転、視線を誘導したい箇所の軽い揺れなど「小さく短い」演出です。動きは操作を分かりやすくする補助であって主役ではない、という前提で控えめに添えると、洗練された印象に仕上がります。なお動きに敏感な利用者に配慮し、実装時はprefers-reduced-motionでアニメーションを抑える指定もあわせて検討すると親切です。