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

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

Bannerifyプラグインを使って、バナーにカスタムキーフレームアニメーションを追加する方法を解説した動画です。

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

編集するキーフレームを選ぶ

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

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

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