---
url: "/ja/bannerify/animation/custom-keyframes.md"
description: "Bannerifyのアニメーションプリセットにない動きが必要な場合は、X、Y、Scale、Rotation、Opacityのプロパティを持つキーフレームを追加して、独自のタイムラインアニメーションを作成できます。"
---

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

> Bannerifyのアニメーションプリセットにない動きが必要な場合は、X、Y、Scale、Rotation、Opacityのプロパティを持つキーフレームを追加して、独自のタイムラインアニメーションを作成できます。

### 動画チュートリアル：Figmaのバナーデザインにカスタムアニメーションを追加する

Bannerifyプラグインを使って、バナーにカスタムキーフレームアニメーションを追加する方法を解説した動画です。
[Embedded media](https://www.youtube-nocookie.com/embed/Js4uSQ855uo)

## カスタムアニメーションパネルを開く {#opening-the-custom-animations-panel}

[Video](/assets/videos/bannerify/animation/opening-panel.mp4)

カスタムアニメーションパネルを開くには、Bannerifyのメインヘッダーにある**Custom Animations**ボタンをクリックします。カスタムアニメーションパネルが開き、独自のキーフレームアニメーションを追加できるようになります。

## カスタムアニメーションのキーフレームを作成する {#creating-custom-animation-keyframes}

[Video](/assets/videos/bannerify/animation/keyframes.mp4)

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

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

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

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

デフォルトの開始点と終了点の間にキーフレームを追加するには、**Add at**フィールドにパーセンテージ（例：**50**）を入力し、**Add**を選びます。

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

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

[Video](/assets/videos/bannerify/animation/editing-properties.mp4)

アニメーションのどのキーフレームでも、5種類のプロパティを編集できます。キーフレーム間でプロパティに違いがあると、その差分が自動でアニメーションになります。たとえば、0%のキーフレームでスケールを2xに、100%のキーフレームでスケールを1xに設定すると、「縮小」するアニメーションが自動で作られます。

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

### パーセンテージによる相対的なX/Y変形を使う {#using-percentage-based-relative-x-y-transforms}

アニメーションさせる要素に対するパーセンテージでX/Yの位置を設定したい場合は、キーフレームのプロパティで**Position**の単位を**px**から **%** に切り替えます。これで、X/Yの値をピクセルではなくパーセンテージで設定できます。

X/Yの変形値をパーセンテージで指定すると、アニメーションを適用した要素の位置を基準に、そのサイズに対するパーセンテージで変形が自動的にアニメーションされます。たとえば、キーフレームでXの変形値を`10%`に設定すると、幅`100px`のレイヤーは`10px`動きます。同じ`10%`のXの変形値を持つアニメーションを幅`200px`のレイヤーに適用すると、レイヤーは`20px`動きます。

### スケールをX/Yに分けて設定する {#splitting-scale-into-x-y-scale-options}

X軸とY軸のスケールをそれぞれ個別に設定したい場合は、キーフレームのプロパティで**Scale**のモードを**Uniform**から**X / Y**に切り替えます。これで、両方を同じ比率で拡大・縮小するのではなく、キーフレームの横方向と縦方向の「Scale」の値を別々に設定できます。

この設定は、もう一方の軸に影響を与えずに、レイヤーの幅や高さだけをアニメーションさせたい場合に便利です。

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

[Video](/assets/videos/bannerify/animation/live-preview-speeds.mp4)

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

> **Tip:** **ライブプレビューの再生速度は調整できます**。カスタムアニメーションが速度によってどう見えるかを確かめたい場合は、プレビューの下にある**Duration**スライダーをドラッグして、プレビューの1ループにかかる秒数を変えることで、ライブプレビューの再生速度を変更できます。

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

[Video](/assets/videos/bannerify/animation/copy-paste-keyframe.mp4)

あるキーフレームのプロパティを別のキーフレームにコピー・ペーストするには、まずコピー元のキーフレームを選んで**Copy**ボタンをクリックします。次に貼り付け先のキーフレームを選び、**Paste**ボタンをクリックすると、コピーしたプロパティが選択中のキーフレームに貼り付けられます。キーフレームを右クリックして、**Copy Properties**または**Paste Properties**を選ぶこともできます。

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

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

[Video](/assets/videos/bannerify/animation/deleting-keyframe.mp4)

キーフレームを削除するには、**Keyframes**トラックで削除したいキーフレームをクリックして選択し、**Delete**ボタンをクリックします（またはキーフレームを右クリックして**Delete Keyframe**を選びます）。これでタイムラインからキーフレームが削除されます。なお、**0%** と**100%** のキーフレームはアニメーションのタイムラインに必要なデフォルトのキーフレームのため、削除*できません*。

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

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

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

[Video](/assets/videos/bannerify/animation/changing-easing.mp4)

**Easing**メニューから項目を選ぶと、アニメーションに付けるイージングの種類を選べます。イージングはタイムライン全体に自動で適用され、**Live preview**エリアも更新されるので、選んだイージングでキーフレームアニメーションの動きがどう変わるかを確認できます。

選べるイージングは次のとおりです。

- Ease (Default)
- Ease out
- Ease in
- In and out
- Linear
- Gentle
- Overshoot
- Anticipate

### カスタムのCubic Bezierイージングを設定する {#setting-a-custom-cubic-bezier-easing-value}

### 動画チュートリアル：Figmaでバナーアニメーションにcubic-bezierイージングを追加する

Bannerifyプラグインを使って、Figmaのバナーアニメーションにカスタムのcubic-bezierイージングを追加する方法を解説した動画です。
[Embedded media](https://www.youtube-nocookie.com/embed/uS2TRRQiYzw)

独自のカーブを使うには、**Easing**メニューでカーブのハンドルをドラッグするか、プリセットの下にあるフィールドに有効なCSSのcubic-bezierの値（例：`cubic-bezier(0.65,0.05,0.36,1);`）を貼り付けます。カスタムのcubic-bezierカーブは、[https://easings.co/](https://easings.co/)のようなサイトや、CSSのcubic-bezierカーブを生成できるお好みのWebサービスを使って作成できます。

## アニメーションの基準点を設定する {#setting-the-animation-origin-point}

[Video](/assets/videos/bannerify/animation/origin-point.mp4)

デフォルトでは、すべてのカスタムアニメーションの基準点はX軸・Y軸ともに`Center`と`Center`に設定されています。これは、**Origin point**グリッドの9つの点のいずれかをクリックして変更できます。グリッドは、縦軸の`Top`、`Center`、`Bottom`と、横軸の`Left`、`Center`、`Right`を組み合わせたものです。

アニメーションの基準点を変えると、レイヤーのどこにアニメーションが「固定」されるかが変わります。たとえば基準点を`Top`と`Left`に設定すると、その点が回転アニメーションの軸になり、拡大・縮小アニメーションの起点にもなります。

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

[Video](/assets/videos/bannerify/animation/adding-new-animation.mp4)

新しいアニメーションを保存するには、**Animation name**のテキストフィールドにアニメーションの名前を入力し、**Add New Animation**ボタンをクリックします。

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

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

[Video](/assets/videos/bannerify/animation/using-custom-animation.mp4)

カスタムアニメーションを1つ以上保存すると、レイヤーのタイムラインにある**登場アニメーション**と**退場アニメーション**のセレクトボックスをクリックして、バナーで使えるようになります。セレクトボックスの選択肢に**Custom Animations**という新しいグループが表示され、保存したすべてのカスタムアニメーションを確認できます。

> **Tip:** **カスタムアニメーションを一括適用する** ほかのプリセットのアニメーションと同じように、[一括適用](/ja/bannerify/animation/animating-banners#applying-bulk-animations)機能を使って、カスタムアニメーションをまとめて適用することもできます。

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

[Video](/assets/videos/bannerify/animation/update-saved-keyframes.mp4)

以前に保存したカスタムアニメーションを更新するには、**Saved animations**メニューから更新したいアニメーションを選びます。保存したアニメーションとそのキーフレームが、カスタムアニメーションパネルに読み込まれます。

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

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

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

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

[Video](/assets/videos/bannerify/animation/deleting-animation.mp4)

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

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