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

틸트 등장Tilt Entrance

Tilt Entrance

틸트 등장

다른 이름Also known as · 기울기 복원 등장

057

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

도판Fig. 057. 틸트 등장 · Tilt Entrance · cubic-bezier(0.22, 1, 0.36, 1)

요소가 비스듬한 평면에서 들어오며 기울기와 비틀림을 풀어 정렬된다.An element arrives at an angle and removes its rotation and skew as it aligns.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

역동적인 요소가 정돈되는 느낌을 준다.Makes energetic movement feel organized at the end.

언제 쓰나Use whenUSE WHEN

포스터 카드를 정렬시킬 때
장면의 주인공 한 요소에 시선을 모을 때

Align a tilted poster card.
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
지속 시간	650ms	454~909ms	한 번의 동작 기준
시작 회전	30deg	10~30deg	중앙 기준
시작 비틀림	15deg	5~15deg	가로 skew
세로 이동	80px	40~120px	1920x1080 기준

GSAP

.effect { animation: effect 650ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes effect {
  from{transform:translateY(80px) rotate(30deg) skewX(15deg);opacity:0} to{transform:translateY(0) rotate(0) skewX(0);opacity:1}
}

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 틸트 등장을 적용해. 지속 650ms, 시작 회전 30deg, 시작 비틀림 15deg, 세로 이동 80px, 이징 cubic-bezier(0.22, 1, 0.36, 1)으로 위 키프레임을 구현하고 최종 상태를 유지해. 동작 줄이기 설정에서는 최종 상태를 바로 보여 줘.

Apply Tilt Entrance to <target> in <file>. Implement the provided keyframes with 650ms duration, initial rotation 30deg, initial skew 15deg, vertical travel 80px, easing cubic-bezier(0.22, 1, 0.36, 1). Preserve the final state and show it immediately when reduced motion is enabled.

Codex

<파일>의 <대상> 스타일에 틸트 등장 키프레임을 추가해. 지속 650ms, 시작 회전 30deg, 시작 비틀림 15deg, 세로 이동 80px, 이징 cubic-bezier(0.22, 1, 0.36, 1)을 적용하고 0초·0.325초·0.65초 시점을 캡처해 시작 상태, 중간 변화, 최종 정착를 확인해. 고정 키프레임으로 재현하고 동작 줄이기 설정을 확인해.

Add Tilt Entrance keyframes to the styles for <target> in <file> using 650ms duration, initial rotation 30deg, initial skew 15deg, vertical travel 80px, easing cubic-bezier(0.22, 1, 0.36, 1). Capture at 0, 0.325, and 0.65 seconds to verify the initial state, intermediate motion, and settled state. Use fixed keyframes and verify reduced-motion behavior.