keyframeとは？初心者にも分かる基本と使い方共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

keyframeとは？基礎をやさしく解説

keyframe という用語は、アニメーションの設計図のようなものです。ウェブサイトで動きをつくるとき、すべての動きを一気に書くのではなく、どの「時点」でどんな状態になるかを決めます。その時点を表すのが keyframe です。英語の発音は「キーフレーム」です。

この考え方は、デザインを動かす際にとても役立ちます。例えば、ボタンをクリックしたときに色が変わり、形が少し拡大して、最後に元の状態に戻る、という一連の流れを作るときに使います。

基本の仕組み

CSS で keyframe を使うときは、まず @keyframes というキーワードの後にアニメーションの名前をつけます。次に、アニメーション中の各時点を表す from（0% 相当）や to（100% 相当）、あるいは 0%、50%、100% などの百分率で状態を記述します。例としては、以下のような書き方を想像してください。

動きを定義するイメージを言葉で表すと、@keyframes が「設計図」、from が「最初の状態」、to が「最後の状態」です。設計図を作るだけでなく、実際の動きは別の CSS プロパティで制御します。

使い方のコツ

実際に適用するには、対象の要素に animation-name、animation-duration、animation-timing-function、animation-iteration-count などのプロパティをセットします。例えば、2 秒かけて名前が「slide」の動きを繰り返す、という設定です。読みやすさと再利用性を優先することが大切です。

小さな例のイメージ

以下は言葉だけの説明です。名前を「slide」とすると、@keyframes slide には初点で要素を左に 0%、中点で 50% に達したときの位置、終点で右に戻るといったイメージを入れます。実際には CSS で

実際の適用例は、animation-name、animation-duration、animation-iteration-count のように書き、要素に対して繰り返し動作を与えます。これにより、ページを開くと滑らかな動きが生まれ、ユーザーの目を引く効果があります。

注意点とヒント

動きが速すぎると見づらく、遅すぎると退屈になるので、タイミング関数（ease, linear など）で滑らかさを調整します。変形と透明度、色の変化 など、複数のプロパティを組み合わせるときは、意図がぶれないように段階を決めましょう。

実用的な表

用語	意味
@keyframes	アニメーションの設計図を作る指示
animation-name	適用する keyframes の名前
animation-duration	1 回の動作にかかる時間
animation-iteration-count	繰り返す回数
animation-timing-function	動きの速さの変化の具合

ポイントのまとめ：keyframe は動きの設計図、適切な命名と読みやすさ、そして 表現の一貫性 を意識すると、初心者でも美しいアニメーションを作れます。

keyframeの関連サジェスト解説

keyframe とは css: keyframe とは css の解説。keyframes は CSS のアニメーションを作る基礎で、@keyframes というルールブロックを使い、時間の経過に合わせて要素のスタイルをどう変えるかを定義します。from や to、あるいは 0% と 100% などのパーセント表現を使って、開始時と終了時の状態を指定します。例えば @keyframes moveRight { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } のように書きます。次に、このアニメーションを要素に適用するには animation-name: moveRight; animation-duration: 1s; animation-timing-function: ease-out; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: forwards; などのプロパティを組み合わせます。ショートハンドとして animation: moveRight 1s ease-out 0s 1 normal forwards; という書き方も覚えておくと便利です。実際には .box クラスの要素に対して、box の CSS に animation-name を設定し、@keyframes moveRight を用意して動かします。これにより、ボタンがフェードインしながら右へ滑る、画像が順番に拡大するなど、ウェブページに生き生きとした動きをつけられます。初心者が始めるときは、まず 1 つの動きを決め、0% と 100% の間の変化を作ることから始め、徐々に途中の点を追加して滑らかな動きを作る練習をするとよいです。さらに実務では、あまり多くの動きを盛り込むと視聴者が疲れることがあるため、モーションの有無を選べる配慮や reduce motion の設定を尊重することが大切です。最後に、学習のコツとしては、名前を決めてから @keyframes ブロックを作成し、それを適用する要素を決めるという順序で進め、複数の例を作って動きを比較して理解を深めると効果的です。

keyframeの同意語

キーフレーム: アニメーションで動きの変化点を定義する重要なフレーム。ここを起点として前後のフレームが補間され、滑らかな動きが作られます。
キー・フレーム: 「キーフレーム」の別表記。読み方も同じで、同じ概念を指します。
鍵フレーム: 直訳に近い表現。意味は同じだが専門的な文脈では「キーフレーム」の方が使われることが多いです。
基準フレーム: 補間の起点となる基準点として扱われるフレーム。動きを決定づける役割を持ちます。
基点フレーム: 動きの基点となるフレーム。キーフレームの役割を示す別の言い方として使われます。
起点フレーム: アニメーションの動きを開始する点として設定されるフレーム。キーフレームとほぼ同義です。
参照フレーム: 補間や設定の際の参照点として使われるフレーム。二つ以上のキーフレーム間のガイドになります。
重要フレーム: 動きの変化点として重要なフレーム。キーフレームと同義の意味で使われることがあります。
主フレーム: アニメーションの中心となるフレーム。文脈によってキーフレームの代替表現として使われることがあります。

keyframeの対義語・反対語

補間フレーム: キーフレームの間に自動的に生成される中間のフレーム。値は補間アルゴリズムによって決まる。
中間フレーム: キーフレーム間に挟まれる途中のフレーム。実務では補間で作られることが多い。
非キーフレーム: キーフレームとしては定義されていないフレーム。主設定は他のキーフレームで決まることが多い。
自動補間フレーム: 自動的に補間されて作られるフレーム。手動でキーを置かなくても動きを表現できる。
全フレーム定義アニメーション: すべてのフレームに対して個別の値を設定する、いわゆるフレームバイフレームのアニメーションのこと。
非キー・フレーム: キーフレームではないことを強調した表現。

keyframeの共起語

アニメーション: 時間の経過とともに要素の状態を変化させ、動きを作る一連の描画。keyframe はこの変化の起点・変化点として使われる重要なフレームです。
フレーム: 映像の最小表示単位。連続するフレームが集まって動画やアニメーションを構成します。
キーフレーム: アニメーションの開始点・終点など変化を決める重要なポイントを示すフレーム。これらを基点に補間が行われます。
タイムライン: 時間軸のことで、各キーフレームやイベントを配置してアニメーションの流れを管理します。
補間: 隣接するキーフレーム間を自動でつなぐ計算。中間の状態を生成して滑らかな動きを作ります。
補間曲線/イージング: 動きの速さの変化を決める曲線。加速・減速の滑らかさを生み出します。
イージング: 動きを自然に見せるための加速・減速の変化を表す技法。
継続時間: アニメーション全体の再生時間。 duration とも呼ばれます。
遅延: アニメーションの開始前に設ける待機時間。
Web Animations API: JavaScript からブラウザのアニメーションを直接制御できる標準API。
CSSアニメーション: CSS の @keyframes を用いてスタイルの変化を表現するアニメーション手法。
トゥイーン/補間: キー帧間の中間値を計算して動きをつくる手法。Tween は英語表現です。
変換/トランスフォーム: translate、rotate、scale など、要素の位置や形を変えるプロパティ。
不透明度/Opacity: 要素の透明度。フェードイン・フェードアウトの基本。
翻訳/平移: 要素の位置を水平・垂直に動かす変化。
回転: 要素を回す変化。
拡大縮小/スケール: 要素の大きさを変える変化。
フレームレート/FPS: 1秒間に表示されるフレーム数。滑らかさの指標。
インターポレーション: 補間の別称。中間値を算出する考え方。
アニメーションデザイン: 動きの設計思想。キーフレームを使って意図を視覚化します。
After Effects: キーフレームを多用して高度なアニメーションを作る代表的な映像編集ソフト。

keyframeの関連用語

keyframe: アニメーションの最小単位で、時間軸上の特定の瞬間における要素の見た目を定義するものです。
キーフレーム: アニメーションの開始点・途中点・終了点など、状態を区切るポイントのこと。0%〜100%のように区切って表現します。
@keyframes: CSSでキーフレームの集合を定義するルール。名前をつけて複数のステップを記述します。
CSS キーフレーム: @keyframes を用いて定義されたキーフレームの集まりのこと。
CSS アニメーション: 要素の外観を時間とともに変化させる機能。@keyframes と組み合わせて使います。
animation-name: 適用するキーフレームの名前を指定するプロパティ。
animation-duration: アニメーション全体の再生時間。例: 2s、500ms。
animation-timing-function: アニメーションの速度変化（イージング）を決める設定。linear / ease / ease-in / ease-out / cubic-bezier(...) など。
linear: 一定の速度で進む基本的なイージング。
ease: 開始と終了を滑らかにする標準的なイージングパターン。
ease-in: 開始を遅くして徐々に速くなるイージング。
ease-out: 開始を速くして終了を遅くなるイージング。
ease-in-out: 開始も終了も滑らかに変化させる一般的な曲線。
cubic-bezier: 自分で3次ベジェ曲線を用いて独自のイージングを作る方法。
animation-iteration-count: アニメーションを何回再生するかを決める設定。infinite は無限再生。
infinite: 無限に再生する設定。
animation-direction: 再生方向の挙動。normal / reverse / alternate / alternate-reverse
normal: 通常通り正方向で再生。
reverse: 逆向きに再生。
alternate: 正・逆を交互に再生。
alternate-reverse: 逆方向から始まり、交互に再生。
animation-fill-mode: アニメーション再生後の表示状態を決める設定。none / forwards / backwards / both。
forwards: 最終状態を表示として残す。
backwards: 開始前の状態を表示として残す。
both: 開始時点と終了時点の両方の状態を保持する。
will-change: 将来変更される可能性のあるプロパティを事前に伝え、描画を最適化するヒント。
transform: 位置・回転・拡大縮小などを一度に変える主要な CSS プロパティ。
translate: 要素の平行移動（位置の移動）。
rotate: 要素の回転。
scale: 要素の拡大・縮小。
skew: 要素の傾きを付ける変形。
opacity: 要素の透明度を0〜1の範囲で変化させる。
frame: アニメーションの中の1コマ。連続して描画される静止画のような状態。
frame rate: 1秒あたりのフレーム数。滑らかさの目安。一般に60fpsが標準。
フレームレート: 1秒間に表示されるフレームの数の日本語表現。
Tweening: 2点間を滑らかにつなぐ補間の総称。
補間: 開始点と終了点の間を滑らかにつなぐ計算。
Interpolate: 補間を実行すること。中間値を算出します。
Web Animations API: WAAPI。JavaScript からアニメーションを作成・制御できる現代的な API。
WAAPI: Web Animations API の略称。
animation: アニメーション全体を指す総称。複数のパラメータで動きを作る。
SVG アニメーション: SVG 要素の属性を時間とともに変化させるアニメーション。
SMIL: SVG 内部で使われる旧式のアニメーション記法。現在は互換性に差が出ることがある。
SVG animate: SVG 内でアニメーションを実現する要素。animate, animateTransform など。
属性アニメーション: 要素の属性値を時間とともに変化させるタイプのアニメーション。
CSS トランジション: 状態変化時に自動的に滑らかに変化する機能。キーとなるキーフレームを使わずに実現する手段。
animation-delay: アニメーション開始前の遅延時間を指定するプロパティ。
現在時刻: 現在の再生位置を表す概念。WAAPI では currentTime などの用語が使われます。
playbackRate: 再生速度を変更するパラメータ。0.5 なら半速、2.0 なら倍速で再生します。
イベント: アニメーションの開始・終了・中断などを検知する仕組み。WAAPI では finish、cancel など。
パフォーマンス最適化: 滑らかなアニメーションを保つための工夫。will-change の適切な使用、レイヤーの分離、GPU アクセラレーションの活用など。