프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 롤 아웃(Roll Out) 퇴장 애니메이션을 넣어 줘.
요소가 바퀴처럼 회전하면서 오른쪽으로 굴러 나가고, 동시에 서서히 사라지게 해 줘. 부드럽게, 나갈수록 빨라지게.
다 굴러 나간 뒤에 레이아웃에서 빼고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.비슷한 모션
A
요소가 한 점을 축으로 회전하며 서서히 사라집니다.
쓰는 곳
항목의 경쾌한 제거
[적용할 곳]에 로테이트 아웃(Rotate Out) 퇴장 애니메이션을 넣어 줘.
요소가 중심을 축으로 반 바퀴 조금 넘게 돌면서 서서히 사라지게 해 줘. 부드럽게, 갈수록 빨라지게.
회전이 끝난 뒤에 제거하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.A
Slide Out (슬라이드 아웃)
다른 이름 Slide Out Up, Slide Out Down
요소가 컨테이너 가장자리 너머로 미끄러져 나가 사라집니다.
쓰는 곳
드로어와 패널 닫기
[적용할 곳]에 슬라이드 아웃(Slide Out) 퇴장 애니메이션을 넣어 줘. slide out up, slide out down이라고도 불러.
요소가 완전히 불투명한 채로 컨테이너 가장자리 너머로 미끄러져 나가 사라지게 해 줘. 빠르게, 나갈수록 가속되게.
컨테이너 가장자리에서 잘라 주고, 화면에서 벗어나면 키보드와 스크린 리더에서도 숨기고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.A
요소가 바퀴처럼 왼쪽에서 굴러 들어오며 서서히 나타납니다.
쓰는 곳
리스트 항목의 경쾌한 등장
[적용할 곳]에 롤 인(Roll In) 등장 애니메이션을 넣어 줘.
요소가 바퀴처럼 회전하면서 왼쪽에서 굴러 들어오고, 동시에 서서히 나타나게 해 줘. 부드럽게, 도착할 때 느려지게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.A
요소가 왼쪽 위 모서리를 경첩 삼아 흔들리며 매달렸다가 화면 밖으로 떨어집니다.
쓰는 곳
코믹하게 요소 없애기
[적용할 곳]에 힌지(Hinge) 퇴장 애니메이션을 넣어 줘.
나사가 풀린 것처럼 요소가 왼쪽 위 모서리를 축으로 아래로 늘어지고, 앞뒤로 흔들리다가 사라지면서 화면 밖으로 떨어지게 해 줘. 느리고 코믹하게, 의도적으로.
레이아웃을 밀거나 스크롤바를 만들지 않고 다른 내용 위로 떨어지게 하고, 다 떨어지면 없애고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.Entrance & Exit의 다른 모션
A
Rotate In (로테이트 인)
다른 이름 Rotate In Down Left
요소가 모서리나 중심을 축으로 회전하며 서서히 나타납니다.
쓰는 곳
아이콘이나 카드의 경쾌한 등장
[적용할 곳]에 로테이트 인(Rotate In) 등장 애니메이션을 넣어 줘. rotate in down left라고도 불러.
요소가 기울어진 각도에서 왼쪽 아래 모서리를 축으로 돌며 제자리로 들어오고, 동시에 서서히 나타나게 해 줘. 부드럽고 여유 있게, 자리 잡을 때 느려지게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.A
Slide In (슬라이드 인)
다른 이름 Slide In Up, Slide In Down, Slide In Left, Slide In Right
요소가 컨테이너 가장자리 바깥에서 제자리까지 페이드 없이 미끄러져 들어옵니다.
쓰는 곳
드로어, 사이드 패널, 배너
[적용할 곳]에 슬라이드 인(Slide In) 등장 애니메이션을 넣어 줘. slide in left, slide in right, slide in up, slide in down이라고도 불러.
요소가 컨테이너 가장자리 바깥에서 제자리까지 미끄러져 들어오고, 그동안 계속 완전히 불투명하게 해 줘. 빠르게, 튕김 없이 부드럽게 감속하게.
바깥에 있는 동안 이웃 요소와 겹치거나 스크롤바가 생기지 않게 컨테이너 가장자리에서 잘라 주고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 제자리에 바로 보여 줘.