---
url: "/ja/bannerify/animation/creating-keyframes.md"
description: "カスタムアニメーションのタイムラインにキーフレームを追加して管理します。"
---

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

> カスタムアニメーションのタイムラインにキーフレームを追加して管理します。

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

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

[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**ボタンをクリックすると、追加したキーフレームが自動で選択されます。