---
url: "/ja/bannerify/animation/hover.md"
description: "Bannerifyのタイムラインのどのレイヤーにも、アニメーション付きのホバー状態を追加でき、プラグインからのHTMLエクスポートに含まれます。"
---

# レイヤーにホバーアニメーションの状態を追加する

> Bannerifyのタイムラインのどのレイヤーにも、アニメーション付きのホバー状態を追加でき、プラグインからのHTMLエクスポートに含まれます。

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

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

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

タイムラインのどのレイヤーにも、**Add Hover**トグルをクリックし、表示されたドロップダウンからホバーアニメーションを選ぶことで、（HTMLエクスポート用の）ホバーアニメーションの状態を追加できます。**Loop**トグルをオンにするとアニメーションが繰り返され、ホバーのタイミングバーの端をドラッグするとホバーアニメーションの速度を調整できます。

アニメーションの見え方をプレビューするには、Bannerifyのプレビューウィンドウでレイヤーにマウスを重ねます。

> **Tip:** **ホバーアニメーションを複数のレイヤーに適用する**。[一括適用](/ja/bannerify/animation/animating-banners#applying-bulk-animations)機能を使うと、ホバーアニメーションを複数のレイヤーにまとめて適用することもできます。

## 切り替わるホバー状態を追加する {#adding-transitional-hover-states}

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

2つの異なる状態を切り替えたい場合（たとえば、CTAボタンにマウスを重ねたときに色を変える場合）は、「ホバー」状態用のレイヤーを作って元のレイヤーの上に配置し、登場のホバー状態を適用します。これで、その要素にマウスを重ねるたびに、ホバー用のレイヤーが切り替わって表示されます。