# 애니메이션 추가하기

{% 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.waveon.io/logic/animation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.