---
url: "/ko/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:** **여러 레이어에 호버 애니메이션 적용하기**. [일괄 적용](/ko/bannerify/animation/animating-banners#applying-bulk-animations) 기능을 사용하면 호버 애니메이션을 여러 레이어에 한꺼번에 적용할 수도 있어요.

## 전환형 호버 상태 추가하기 {#adding-transitional-hover-states}

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

두 가지 상태 사이를 전환하고 싶다면(예: CTA 버튼에 마우스를 올리면 색이 바뀌게 하기), “호버” 상태 레이어를 만들어 원래 레이어 위에 놓고 등장 호버 상태를 적용하세요. 그러면 그 요소에 마우스를 올릴 때마다 호버 상태 레이어가 전환되며 나타나요.