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

롤 등장Roll Reveal

Roll Reveal

롤 등장

다른 이름Also known as · Roll In and Out · 구르기 등장과 퇴장

051

렌더 추가 예정CLIP COMING롤 등장Roll Reveal정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 051. 롤 등장 · Roll Reveal · cubic-bezier(0.22, 1, 0.36, 1)

요소가 옆으로 이동하면서 평면 회전해 굴러 들어오거나 나간다.An element rolls in or out through sideways movement and planar rotation.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

재미있는 이동과 방향을 전달한다.Communicates playful movement and direction.

언제 쓰나Use whenUSE WHEN

원형 아이콘을 장난스럽게 넣을 때
장면의 주인공 한 요소에 시선을 모을 때

Introduce a round icon playfully.
Focus attention on one main element in a scene.

과용 주의AvoidAVOID

표나 긴 텍스트에는 쓰지 않는다.
동작 줄이기 설정에서는 정적인 최종 상태를 보여 준다.

분류TagsTAGS

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

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

원형 쿠폰 아이콘이 왼쪽에서 구르며 들어온다.

과용 · 나쁜 사례OVERUSE

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

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속 시간	700ms	489~979ms	한 번의 동작 기준
이동 거리	100%	100px~100%	요소 너비 기준
시작 회전	-120deg	-180~-60deg	이동과 동시 회전

GSAP

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

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 롤 등장을 적용해. 지속 700ms, 이동 거리 100%, 시작 회전 -120deg, 이징 cubic-bezier(0.22, 1, 0.36, 1)으로 위 키프레임을 구현하고 최종 상태를 유지해. 동작 줄이기 설정에서는 최종 상태를 바로 보여 줘.

Apply Roll Reveal to <target> in <file>. Implement the provided keyframes with 700ms duration, travel distance 100%, initial rotation -120deg, easing cubic-bezier(0.22, 1, 0.36, 1). Preserve the final state and show it immediately when reduced motion is enabled.

Codex

<파일>의 <대상> 스타일에 롤 등장 키프레임을 추가해. 지속 700ms, 이동 거리 100%, 시작 회전 -120deg, 이징 cubic-bezier(0.22, 1, 0.36, 1)을 적용하고 0초·0.35초·0.7초 시점을 캡처해 시작 상태, 중간 변화, 최종 정착를 확인해. 고정 키프레임으로 재현하고 동작 줄이기 설정을 확인해.

Add Roll Reveal keyframes to the styles for <target> in <file> using 700ms duration, travel distance 100%, initial rotation -120deg, easing cubic-bezier(0.22, 1, 0.36, 1). Capture at 0, 0.35, and 0.7 seconds to verify the initial state, intermediate motion, and settled state. Use fixed keyframes and verify reduced-motion behavior.