> For the complete documentation index, see [llms.txt](https://docs.waveon.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.waveon.io/logic/animation.md).

# 애니메이션 추가하기

{% hint style="info" %}
엘리먼트에 애니메이션 효과를 추가할 수 있어요!
{% endhint %}

### 1️⃣ 엘리먼트 추가하기

먼저 애니메이션 효과를 적용할 엘리먼트를 추가해 주세요.

<figure><img src="/files/R2Sds2XaEOAUnMc4jr8d" alt=""><figcaption></figcaption></figure>

### 2️⃣ 엘리먼트 Condition(조건) 설정하기

해당 엘리먼트를 클릭하고, 우측 에디터에서 \[로직]을 확인해 주세요. Condition은 엘리먼트가 애니메이션이 언제 적용될 건지 정하는 조건이에요. 예시에서는 '화면 로드 직후에 엘리먼트가 나타나면'이라는 조건을 가지고 있네요.

<figure><img src="/files/PNuf9cAsZm9w4gAXxnB5" alt=""><figcaption></figcaption></figure>

### 3️⃣ 엘리먼트 Result(결과) 설정하기

이번엔 Result를 설정할 거예요. Result는 조건을 행했을 때 나타나는 결과를 뜻합니다. 애니메이션 실행하기를 클릭 후, 어떤 형식의 애니메이션을 추가할 지 선택해 주시면 돼요.

<figure><img src="/files/w2F5vERy4PihdH5406q4" alt=""><figcaption></figcaption></figure>

### 4️⃣ 애니메이션 확인하기

마지막으로 미리보기로 애니메이션이 잘 적용이 되었는지 확인해 보세요!

<figure><img src="/files/DUgCFqideWbj8t7W2iP8" alt=""><figcaption></figcaption></figure>