효과Effects / 등장·퇴장Entrance & Exit / Nº 054

슬라이드Slide

Slide

슬라이드

다른 이름Also known as · Slide In and Out · 슬라이드 등장과 퇴장 · Text Group Slide · 텍스트 묶음 슬라이드 · Line-by-Line Slide · Short Slide Right · Short Slide Down

054

렌더 추가 예정CLIP COMING슬라이드Slide정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 054. 슬라이드 · Slide · cubic-bezier(0.22, 1, 0.36, 1)

요소가 화면 가장자리 또는 일정 거리 밖에서 들어오거나 빠져나간다.An element slides in from an edge or moves out of view.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

요소의 출처와 이동 방향을 알려 준다.Makes the origin and direction of movement clear.

언제 쓰나Use whenUSE WHEN

옆 패널의 출처를 보여 줄 때
장면의 주인공 한 요소에 시선을 모을 때

Show where a side panel comes from.
Focus attention on one main element in a scene.

과용 주의AvoidAVOID

이동 경로에 본문을 두지 않는다.
동작 줄이기 설정에서는 정적인 최종 상태를 보여 준다.

분류TagsTAGS

등장·퇴장Entrance & Exit 주목 끌기Attention 강조Emphasis 설명 영상Explainer video 숏폼Short-form 발표Presentation 난이도 기본Basiccss

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

안내 패널이 자신의 너비만큼 왼쪽에서 들어온다.

과용 · 나쁜 사례OVERUSE

여러 요소에 동시에 적용해 읽을 위치와 시선을 계속 바꾸게 만든다.

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속 시간	600ms	420~840ms	한 번의 동작 기준
이동 거리	100%	48px~100%	요소 너비 기준
방향	왼쪽	상하좌우	부모 overflow hidden

GSAP

.effect { animation: effect 600ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes effect {
  from{transform:translateX(-100%)} to{transform:translateX(0)}
}

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 슬라이드을 적용해. 지속 600ms, 이동 거리 100%, 방향 왼쪽, 이징 cubic-bezier(0.22, 1, 0.36, 1)으로 위 키프레임을 구현하고 최종 상태를 유지해. 동작 줄이기 설정에서는 최종 상태를 바로 보여 줘.

Apply Slide to <target> in <file>. Implement the provided keyframes with 600ms duration, travel distance 100%, direction left, easing cubic-bezier(0.22, 1, 0.36, 1). Preserve the final state and show it immediately when reduced motion is enabled.

Codex

<파일>의 <대상> 스타일에 슬라이드 키프레임을 추가해. 지속 600ms, 이동 거리 100%, 방향 왼쪽, 이징 cubic-bezier(0.22, 1, 0.36, 1)을 적용하고 0초·0.3초·0.6초 시점을 캡처해 시작 상태, 중간 변화, 최종 정착를 확인해. 고정 키프레임으로 재현하고 동작 줄이기 설정을 확인해.

Add Slide keyframes to the styles for <target> in <file> using 600ms duration, travel distance 100%, direction left, easing cubic-bezier(0.22, 1, 0.36, 1). Capture at 0, 0.3, and 0.6 seconds to verify the initial state, intermediate motion, and settled state. Use fixed keyframes and verify reduced-motion behavior.