---
url: "/ja/bannerify/animation/selecting-animations.md"
description: "バナーのレイヤーに、数十種類の定義済みキーフレームアニメーションから選んで適用できます。"
---

# アニメーションを選ぶ

> バナーのレイヤーに、数十種類の定義済みキーフレームアニメーションから選んで適用できます。

### 動画チュートリアル：FigmaからバナーにアニメーションをつけてHTMLにエクスポートする

この動画では、FigmaからそのままHTMLバナーにアニメーションを付け、数秒で入稿できる形式にエクスポートする方法を紹介します。
[Embedded media](https://www.youtube-nocookie.com/embed/-TA088FNulA)

## アニメーション {#animations}

Bannerifyには、数十種類の定義済みキーフレームアニメーションが用意されており、次の5つのカテゴリに分かれています。

- 登場（Entrances）
- 退場（Exits）
- 基本変形（Basic Transforms）
- 注目（Attention Seekers）
- 背景パン（Background Pans）

> **Tip:** **Split Textアニメーションを使う**。 Bannerifyには、対応するテキストレイヤー向けに、文字・単語・行ごとに分割する専用のアニメーションも用意されています。設定手順、対応フォント、現時点での注意点については、[Split Textアニメーション](/ja/bannerify/animation/split-text)をご覧ください。

> **Tip:** **ネイティブのFigma Motionアニメーションを使う**。 個々のレイヤーでは**Figma Motion**グループから検出されたアニメーションを選ぶか、**Batch Layer Actions**のエントリーメニューから**Apply Each Layer's Figma Motion**を選びます。少なくとも1つのレイヤーにMotionを適用したら、Figma本来のタイミングのずれも反映したい場合は、タイムラインの上にある**Mirror Figma Motion Timings**を有効にします。オプトインの手順と対応プロパティの詳細は、[Figma Motionアニメーションを使う](/ja/bannerify/animation/figma-motion)をご覧ください。

> **Tip:** **レイヤーからアニメーションを外す**。 レイヤーにアニメーションを一切付けたくない場合は、**No Entry Animation**と**No Exit Animation**のどちらか（または両方）を選びます。あるいは、Figmaのレイヤー名の先頭に**locked-** を付ける（例：*locked-RectangleBackground*）方法もあります。この場合もアニメーションは追加されず、プラグインのタイムラインでアニメーションのセレクトボックスも無効になります。

## 登場アニメーションを追加する {#adding-entry-animations}

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

**登場アニメーション**を設定するには、Bannerifyのタイムラインでアニメーションを付けたいレイヤーにカーソルを合わせ、**上のセレクトボックス**をクリックします。アニメーションの一覧をスクロールし、アニメーション名を**クリック**してレイヤーに適用します。新しいアニメーションを適用したバナーのプレビューがすぐに更新されます。

## 退場アニメーションを追加する {#adding-exit-animations}

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

**退場アニメーション**の追加方法は、登場アニメーションと同じです。上のセレクトボックスの代わりに**下のセレクトボックス**をクリックして、レイヤーの退場アニメーションを選びます。

> **Note:** レイヤーに設定する退場アニメーションは、**必ず「登場」アニメーションが終わった*後*に始まるように設定してください**。 そうしないと、2つのアニメーションが重なり、同時にトランジションが競合して問題が起きます。