---
url: "/ja/pitchdeck/design/keyframes.md"
description: "Pitchdeckに標準で含まれるアニメーションプリセットにない動きが必要な場合は、*x*、*y*、*scale*、*rotation*、*opacity*のプロパティを持つカスタムキーフレームを追加して、独自のタイムラインアニメーションを作成できます。"
---

# カスタムキーフレームアニメーションの作成

> Pitchdeckに標準で含まれるアニメーションプリセットにない動きが必要な場合は、*x*、*y*、*scale*、*rotation*、*opacity*のプロパティを持つカスタムキーフレームを追加して、独自のタイムラインアニメーションを作成できます。

## 新しいカスタムアニメーションを作成する {#creating-a-new-custom-animation}

[Video](/assets/videos/pitchdeck/design/custom-animation-create.mp4)

カスタムアニメーションパネルを開くには、Pitchdeckのメインヘッダーにある**Custom Animations**ボタンをクリックします（ウィンドウサイズがSmallの場合は**Animations**と表示されます）。カスタムアニメーションパネルが開き、独自のキーフレームアニメーションを追加できるようになります。

アニメーションパネルを開くと、最初のキーフレーム（0%）と最後のキーフレーム（100%）の2つが表示されます。キーフレームアニメーションには、アニメーションの開始点となるフレームと終了点を示すキーフレームが必要なため、この2つは標準で追加され、削除できません。

### 編集するキーフレームを選択する {#selecting-a-keyframe-to-edit}

カスタムアニメーションパネルの上部にあるキーフレームのパーセンテージの列でキーフレームをクリックすると、すぐにそのキーフレームに切り替えられます。キーフレームをクリックすると、そのキーフレームのプロパティを編集できます。

### 新しいキーフレームを挿入する {#inserting-new-keyframes}

標準の開始点と終了点の間にキーフレームを追加するには、そのパーセンテージ（例：**50**）を入力し、**Insert New Keyframe**を選択します。

新しく追加したキーフレームは、現在選択しているキーフレームと同じプロパティで自動的に作成されます。そのため、すでに追加したキーフレームをもとにプロパティを調整できます。また、**Insert New Keyframe**ボタンをクリックすると、新しく追加したキーフレームが自動的に選択されます。

### キーフレームのプロパティを編集する {#editing-keyframe-properties}

各キーフレームでは、5種類のプロパティを編集できます。キーフレーム間でプロパティに違いがあると、その変化が自動的にアニメーションになります。たとえば、0%のキーフレームでscaleを2xに、100%のキーフレームでscaleを1xに設定すると、「縮む」アニメーションが自動的に作成されます。

- **X**プロパティは、要素の左右のピクセル位置をアニメーションさせます。
- **Y**プロパティは、要素の上下のピクセル位置をアニメーションさせます。
- **Opacity**プロパティは、要素の透明度（パーセンテージ）をアニメーションさせます。
- **Rotate**プロパティは、要素の回転角度をアニメーションさせます。
- **Scale**プロパティは、要素のサイズをアニメーションさせます。

### キーフレームのプロパティをコピー・ペーストする {#copying-and-pasting-keyframe-properties}

あるキーフレームのプロパティを別のキーフレームにコピー・ペーストできます。まずコピー元のキーフレームを選択して**Copy Properties**ボタンをクリックし、次にペースト先のキーフレームを選択して**Paste Properties**ボタンをクリックすると、コピーしたプロパティが選択中のキーフレームにペーストされます。

> **Note:** **コピーしたプロパティは、パネルを閉じるまでしか使えません** カスタムアニメーションパネルを開いている間は、アニメーション内のどのキーフレームにもプロパティをコピー・ペーストできます。カスタムアニメーションパネルを閉じると、コピーしたプロパティはペーストできなくなります。

### キーフレームを削除する {#deleting-keyframes}

キーフレームを削除するには、キーフレームのパーセンテージの列でキーフレームをクリックして選択し、**Delete Keyframe**ボタンをクリックしてタイムラインから削除します。なお、**0%** と**100%** のキーフレームはアニメーションのタイムラインに必要な標準のキーフレームのため、*削除できません*。

キーフレームを削除すると、編集対象のキーフレームとして**0%** のキーフレームが自動的に選択し直されます。

> **Warning:** **キーフレームを削除すると、完全に削除されます**。 キーフレームを削除すると、タイムラインから完全に削除され、削除を元に戻すことはできません。ただし、アニメーションのタイムラインを編集している間であれば、キーフレームの**Copy Properties**を実行してから削除し、削除したキーフレームのプロパティを別のキーフレームにペーストできます。

### ライブプレビューでアニメーションを確認する {#using-the-live-preview-to-see-your-animation}

更新したキーフレームとそのプロパティでアニメーションがどう見えるかは、**Live Preview**エリアで確認できます。このエリアはキーフレームのプロパティのすぐ隣、アニメーションのタイムラインの真下にあります。キーフレーム、プロパティ、イージングに加えた変更は、ライブプレビューに自動的に反映されます。

> **Note:** **ライブプレビューの再生速度は調整できます**。 カスタムアニメーションがさまざまな速度でどう見えるかを確認したい場合は、**Live Preview**の下にある速度スライダーを左右にドラッグして、ライブプレビューの再生速度を上げ下げできます。

### アニメーションのイージングを設定する {#setting-the-animation-easing}

アニメーションに適用するイージングの種類は、**Easing**のセレクトボックスから選べます。イージングはタイムライン全体に自動的に適用され、**Live Preview**エリアも更新されるので、選んだイージングによってキーフレームアニメーションの動きがどう変わるかを確認できます。

次のイージングから選べます。

- Ease (Default)
- Linear
- Ease In
- Ease Out
- Ease In Out

### 新しいカスタムアニメーションを保存する {#saving-your-new-custom-animation}

新しいアニメーションを保存するには、**New Custom Animation Name**のテキスト入力欄にアニメーションの名前を入力し、**Add New Animation**をクリックします。

> **Note:** **カスタムアニメーションは、*現在のFigmaファイル*でのみ保存・利用できます** アニメーションを保存すると、*現在の*Figmaファイル内のどの*ページ*でも使えるようになります。ただし、アニメーションはFigmaファイルに直接保存され、別のファイルには移せないため、まったく別の新しいFigmaファイルでPitchdeckを実行すると、保存したアニメーションは表示されません。新しいFigmaファイルでは、アニメーションを作り直す必要があります。または、*現在の*Figmaファイルに新しい*ページ*を作成すれば、このFigmaファイルで保存したカスタムアニメーションを引き続き使えます。

### 保存したカスタムアニメーションを使う {#using-your-saved-custom-animations}

カスタムアニメーションを1つ以上保存したら、**Animations**タブでレイヤーを選択し、アニメーションピッカー（**All effects…** または**Animation**メニュー）を開くと、スライドで使えるようになります。ピッカーに**Custom**タブが表示され、保存したすべてのカスタムアニメーションを確認できます。

ほかのプリセットアニメーションと同様に、**Animations**タブで[複数のレイヤーをまとめて選択](/ja/pitchdeck/design/animations#select-elements)すれば、カスタムアニメーションを一度に複数のレイヤーへ適用することもできます。

## 保存したアニメーションを更新する {#updating-your-saved-animations}

[Video](/assets/videos/pitchdeck/design/custom-animation-update.mp4)

以前に保存したカスタムアニメーションを更新するには、**Your Saved Animations**のセレクトボックスで更新したいアニメーションを選びます。保存したアニメーションとそのキーフレームが、カスタムアニメーションパネルに読み込まれます。

保存したアニメーションを選んだら、必要に応じてキーフレームとプロパティを編集します。更新内容に問題がなければ、**Update Saved Animation**ボタンをクリックして変更を保存し、以前のアニメーションのキーフレームを*上書き*します。

なお、保存したアニメーションを更新すると、そのカスタムアニメーションをすでに使っているスライド内のすべてのレイヤーに、更新後のキーフレームが自動的に適用されます。

> **Tip:** **保存したアニメーションをもとに新しいアニメーションを作成する**。 保存したアニメーションを読み込んで変更したいものの、保存済みのバージョンを「上書き」したくない場合は、**New Custom Animation Name**を入力して**Add New Animation**ボタンをクリックすれば、そのアニメーションから新しいアニメーションを作成できます。

## 保存したアニメーションを削除する {#deleting-your-saved-animations}

[Video](/assets/videos/pitchdeck/design/custom-animation-delete.mp4)

アニメーションを削除するには、**Your Saved Animations**でいずれかの項目を選んでアニメーションを読み込み、**Delete Saved Animation**ボタンをクリックして保存したアニメーションを削除します。

> **Warning:** **保存したアニメーションを削除すると、完全に削除され、レイヤーからも外れます**。 保存したアニメーションを削除すると、**Your Saved Animations**の一覧から完全に削除されます。削除したカスタムアニメーションを使っていたスライド内のレイヤーは、アニメーションが**適用されていない**状態に戻ります。