# 애니메이션

블록이 스크롤 위치와 시간에 따라 다양하게 움직이며 내용을 강조하는 효과를 줍니다.

# 애니메이션 추가

편집 화면 오른쪽에서 애니메이션 메뉴를 클릭합니다.

![Image](https://upload.cafenono.com/image/slashpageHome/20241226/160224_61TQpx2VWRUOh60TpR?q=80&s=1280x180&t=outside&f=webp)

원하는 블록에 커서를 올리고 `애니메이션 추가` 를 클릭한 뒤, 원하는 애니메이션을 선택합니다.

[Video](https://vz-127031db-d43.b-cdn.net/045f1d47-6622-44a1-b9c8-dc10626e8e3c/playlist.m3u8)

애니메이션 적용이 완료된 블록은 이미지와 같이 배경색이 초록빛으로 보입니다. 화면 오른쪽 `프리뷰 모드` 옵션을 껐다가 키면 뷰 모드로 전환하지 않고도 애니메이션이 적용된 모습을 미리 확인할 수 있습니다.

![Image](https://upload.cafenono.com/image/slashpageHome/20241226/161331_sHPKfeh1QMXI3NNMUZ?q=80&s=1280x180&t=outside&f=webp)

> 같은 애니메이션을 여러 블록에 한 번에 적용하고 싶다면, 스타일 복사 기능을 활용해 보세요.

스타일 복사: Cmd(Ctrl) + Option(Alt) + C

스타일 붙여넣기: Cmd(Ctrl) + Option(Alt) + V

# 애니메이션 종류

트리거(애니메이션이 시작되기 위한 행위)에 따라 크게 세 가지로 나뉘며, 트리거마다 각각 다른 애니메이션을 적용할 수 있습니다. 각 이름 아래에 있는 예시를 통해 어떤 효과인지 알아봅니다.

## 입장(Entrance)

블록이 화면에 표시되자마자 애니메이션이 시작되며, 스크롤 위치와 무관하게 미리 설정한 지속 시간동안만 작동합니다.

### 슬라이드(Slide)

버튼 설정값: Delay 0.3 | Duration 0.5 | Distance 50 | Direction Up | Animation CubicBezier
이미지 설정값: Delay 0.6 | Duration 0.5 | Distance 50 | Direction Up | Animation CubicBezier

[Button]()

![Image](https://upload.cafenono.com/image/slashpageHome/20241226/150858_lST838z6CCjx8HBO3w?q=80&s=1280x180&t=outside&f=webp)

### 페이드인(Fade in)

버튼 설정값: Delay 0 | Duration 1 | CubicBezier
이미지 설정값: Delay 0.3 | Duration 1 | CubicBezier

[Button]()

![Image](https://upload.cafenono.com/image/slashpageHome/20241226/150858_lST838z6CCjx8HBO3w?q=80&s=1280x180&t=outside&f=webp)

### 스케일인(Scale in)

버튼 설정값: Delay 0 | Duration 0.8 | Animation CubicBezier
이미지 설정값: Delay 0 | Duration 0.8 | Animation CubicBezier

[Button]()

![Image](https://upload.cafenono.com/image/slashpageHome/20241226/150858_lST838z6CCjx8HBO3w?q=80&s=1280x180&t=outside&f=webp)

## 스크롤(Scroll)

스크롤을 내리는 동안 블록이 화면에 보이기 시작할 때부터 보이지 않을 때까지, 애니메이션이 스크롤 위치를 따라 연속적으로 작동합니다.

### 패럴록스(Parallax)

버튼 설정값: Distance 150 | Direction Left | Overflow Visible
이미지 설정값: Distance 150 | Direction Right | Overflow Visible

[Button]()

![Image](https://upload.cafenono.com/image/slashpageHome/20241226/150858_lST838z6CCjx8HBO3w?q=80&s=1280x180&t=outside&f=webp)

### 페이드인(Fade in)

버튼 설정값: 없음
이미지 설정값: 없음

[Button]()

![Image](https://upload.cafenono.com/image/slashpageHome/20241226/150858_lST838z6CCjx8HBO3w?q=80&s=1280x180&t=outside&f=webp)

### 페이드아웃(Fade out)

버튼 설정값: 없음
이미지 설정값: 없음

[Button]()

![Image](https://upload.cafenono.com/image/slashpageHome/20241226/150858_lST838z6CCjx8HBO3w?q=80&s=1280x180&t=outside&f=webp)

### 스케일인(Scale in)

버튼 설정값: Direction Center
이미지 설정값: Direction Bottom

[Button]()

![Image](https://upload.cafenono.com/image/slashpageHome/20241226/150858_lST838z6CCjx8HBO3w?q=80&s=1280x180&t=outside&f=webp)

## 무한 반복(Infinite)

사이트에 접속하자마자 애니메이션이 시작되며, 스크롤 위치와 무관하게 계속 작동됩니다.

### 브레스(Breathe)

버튼 설정값: Distance 10 | Duration 2 | Direction Center | Overflow Visible
이미지 설정값: Distance 50 | Duration 4 | Direction Width | Overflow Visible

[Button]()

![Image](https://upload.cafenono.com/image/slashpageHome/20241226/150858_lST838z6CCjx8HBO3w?q=80&s=1280x180&t=outside&f=webp)

### 슬라이드(Slide)

이미지 여러 개가 가로 방향으로 흘러갑니다. 이미지 슬라이더 블록에만 적용할 수 있습니다.

설정값: Speed 2 | Pause on hover On

![Image](https://upload.cafenono.com/image/slashpageHome/20241226/163625_nQNjMkBAqbHAI6Nicb?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpageHome/20241226/163625_se2nm1jmLYHDECdlfs?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpageHome/20241226/163625_QxsQZsBwJQCh6nYRue?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpageHome/20241226/163625_IaeTZf4iFWf0ix7pvD?q=80&s=1280x180&t=outside&f=webp)

For the site tree, see the [root Markdown](https://slashpage.com/slashpage-help-center.md).