Puff In / Puff Out (퍼프 인 / 퍼프 아웃)
다른 이름 Puff
요소가 크고 흐릿하며 투명한 상태에서 줄어들며 또렷해져 연기처럼 나타나고, 사라질 때는 반대로 움직입니다.
쓰는 곳
부드러운 오브젝트 등장
변형
- in
- out
프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 퍼프 인 / 퍼프 아웃(Puff In / Puff Out) 애니메이션을 넣어 줘. 퍼프(puff)라고도 불러.
나타날 때는 크고 흐릿하며 투명한 상태에서 줄어들며 연기가 가라앉듯 또렷해지고, 사라질 때는 다시 흐릿하게 부풀면서 없어지게 해 줘. 부드럽고 꽤 빠르게.
커진 상태가 레이아웃을 밀어내거나 스크롤바를 만들지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 즉시 전환해 줘.비슷한 모션
ABCD
Blur In (블러 인)
다른 이름 Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
요소가 크게 흐려진 상태에서 점점 또렷해지며, 보통 미끄러지거나 서서히 나타나는 움직임과 함께합니다.
쓰는 곳
헤드라인, 히어로 텍스트 등장
[적용할 곳]에 블러 인(Blur In) 등장 애니메이션을 넣어 줘. 텍스트 포커스 인(text focus in), 포커스 인(focus in), 블러 텍스트 리빌(blur text reveal)이라고도 불러.
내용이 크게 흐리고 투명한 상태에서 시작해 제자리에서 점점 또렷해지게 해 줘. 부드럽고 약간 느리게, 위치는 움직이지 않게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 처음부터 또렷하게 보여 줘.A
Zoom Out (줌 아웃)
다른 이름 Scale Out
요소가 줄어들며 서서히 옅어지다 사라집니다.
쓰는 곳
모달 닫기와 항목 제거
[적용할 곳]에 줌 아웃(Zoom Out) 퇴장 애니메이션을 넣어 줘. 스케일 아웃(scale out)이라고도 불러.
요소가 중심을 향해 줄어들면서 서서히 옅어지다 사라지게 해 줘. 빠르게, 갈수록 가속되게.
완전히 사라진 뒤에 레이아웃과 키보드 포커스에서 빼고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.ABCD
Blur Out (블러 아웃)
다른 이름 Text Blur Out, Slide Out Blurred, Smoky Text Dissipate
요소가 사라지거나 미끄러져 나가면서 점점 흐려집니다.
쓰는 곳
부드러운 전환, 텍스트 퇴장
[적용할 곳]에 블러 아웃(Blur Out) 퇴장 애니메이션을 넣어 줘. 텍스트 블러 아웃(text blur out), 스모키 텍스트 디시페이트(smoky text dissipate)라고도 불러.
내용이 제자리에서 점점 더 흐려지면서 사라지게 해 줘. 녹아 없어지듯 부드럽고 약간 느리게.
흐려짐이 끝난 뒤에 요소를 숨기거나 없애고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.A
Zoom In (줌 인)
다른 이름 Scale In, Zoom In Up, Zoom In Down
요소가 작고 투명한 상태에서 원래 크기로 커지며 서서히 나타납니다.
쓰는 곳
모달, 이미지 라이트박스, 팝오버
[적용할 곳]에 줌 인(Zoom In) 등장 애니메이션을 넣어 줘. 스케일 인(scale in)이라고도 불러.
요소가 작고 투명한 상태에서 원래 크기로 커지며 서서히 나타나게 해 줘. 빠르고 부드럽게, 크기가 넘쳤다 돌아오는 느낌 없이.
주변 레이아웃에 영향을 주지 않게 중심에서 확대하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.Entrance & Exit의 다른 모션
A
요소가 바퀴처럼 왼쪽에서 굴러 들어오며 서서히 나타납니다.
쓰는 곳
리스트 항목의 경쾌한 등장
[적용할 곳]에 롤 인(Roll In) 등장 애니메이션을 넣어 줘.
요소가 바퀴처럼 회전하면서 왼쪽에서 굴러 들어오고, 동시에 서서히 나타나게 해 줘. 부드럽게, 도착할 때 느려지게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.A
요소가 오른쪽으로 굴러 나가며 서서히 사라집니다.
쓰는 곳
리스트 항목의 경쾌한 제거
[적용할 곳]에 롤 아웃(Roll Out) 퇴장 애니메이션을 넣어 줘.
요소가 바퀴처럼 회전하면서 오른쪽으로 굴러 나가고, 동시에 서서히 사라지게 해 줘. 부드럽게, 나갈수록 빨라지게.
다 굴러 나간 뒤에 레이아웃에서 빼고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 바로 숨겨 줘.A
Rotate In (로테이트 인)
다른 이름 Rotate In Down Left
요소가 모서리나 중심을 축으로 회전하며 서서히 나타납니다.
쓰는 곳
아이콘이나 카드의 경쾌한 등장
[적용할 곳]에 로테이트 인(Rotate In) 등장 애니메이션을 넣어 줘. rotate in down left라고도 불러.
요소가 기울어진 각도에서 왼쪽 아래 모서리를 축으로 돌며 제자리로 들어오고, 동시에 서서히 나타나게 해 줘. 부드럽고 여유 있게, 자리 잡을 때 느려지게.
한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 움직임 없이 제자리에 보여 줘.