트랜지션
Transition
색이나 크기가 '뚝' 바뀌지 않고 정해진 시간 동안 부드럽게 바뀌게 하는 설정이에요.
💡 전등을 '탁' 켜는 대신 밝기 조절기로 서서히 밝히는 거예요.
👆 직접 눌러 보기
진짜로 동작해요. 눌러 보고 움직여 보세요.
CSStransition: all 300ms ease-out;
🤖 AI에게 이렇게 말해 보세요
버튼과 링크의 색이 바뀔 때 0.2초 트랜지션(Transition)을 줘서 부드럽게 바뀌게 해 줘. 움직임은 ease-out으로 해 줘.
핵심은 ‘Transition’라는 단어예요. 이 단어를 넣으면 AI가 훨씬 정확하게 알아들어요.
📌 알아 두면 좋아요
'ease-in-out', 'ease-out'은 움직임의 속도 곡선(이징, Easing)이에요. 처음엔 빠르고 끝에 천천히 멈추는 ease-out이 가장 자연스러워요.
이럴 때 써요
- 호버, 메뉴 열기처럼 상태가 바뀌는 모든 순간
이렇게도 불러요: 부드럽게 바뀌기, 전환, 이징, easing, ease, 애니메이션 속도, 서서히