6XC

CSS 트랜지션 생성기

속성, 지속 시간, 타이밍 함수, 지연 시간을 설정해 transition을 만들고 클릭 한 번으로 실시간 테스트해 보세요.

조회수 915회

transition 속성이란

문법: transition: 속성 지속시간 타이밍함수 지연시간. 호버, 포커스, 클래스 전환으로 발생하는 변화에 애니메이션을 적용합니다. 타이밍 함수는 움직임의 느낌을 결정합니다: ease는 자연스러운 기본값이고, ease-out은 등장 효과에 어울리며, 사용자 정의 cubic-bezier 곡선은 탄력 있는 오버슈트 효과를 만듭니다. 테스트 버튼을 눌러 설정한 값이 실제로 어떻게 움직이는지 확인하세요.

자주 묻는 질문

어떤 속성이 애니메이션 비용이 적나요?

transform과 opacity입니다 — 브라우저가 레이아웃을 다시 계산하지 않고 GPU에서 합성할 수 있습니다. width, height, top을 애니메이션하면 매 프레임마다 레이아웃을 다시 계산해야 해서 끊길 수 있습니다.

기본값으로 적당한 지속 시간은 어느 정도인가요?

작은 UI 피드백(버튼, 호버)에는 150~250ms, 더 큰 움직임에는 300~500ms가 적당합니다. 약 700ms를 넘어가면 인터페이스가 느리게 느껴지기 시작합니다.

비슷한 도구

CSS 그라데이션 생성기 실시간 미리보기로 선형, 방사형, 원뿔형 CSS 그라데이션을 디자인하고 코드를 복사하세요. 생성하기 CSS 박스 그림자 생성기 오프셋, 흐림 정도, 퍼짐, 색상, 불투명도, 안쪽 그림자(inset)를 시각적으로 조정하며 실시간 미리보기로 그림자를 디자인하세요. 생성하기 CSS 모서리 둥글기 생성기 각 모서리를 개별적으로 또는 한 번에 px나 %로 둥글리고, 실시간 미리보기와 복사 가능한 CSS를 확인하세요. 생성하기 CSS 텍스트 그림자 생성기 오프셋, 흐림, 색상, 불투명도를 조정해 text-shadow를 디자인하고 샘플 텍스트로 실시간 미리보기를 확인하세요. 생성하기