CSS 트랜지션 생성기
속성·지속 시간·타이밍 함수·지연으로 CSS transition 축약형을 만들고 마우스 오버 실시간 미리보기까지 제공합니다 — 100% 브라우저에서 실행되며 업로드되지 않습니다.
아래 상자에 마우스를 올리면 트랜지션을 미리 볼 수 있습니다.
transition: all 0.3s ease;
🔒 CSS는 브라우저에서 생성되며 업로드되지 않습니다.
이 도구가 하는 일
이 생성기는 네 가지 값으로 바로 붙여넣을 수 있는 CSS transition 축약형을 만듭니다. 애니메이션할 속성, 지속 시간(초), 속도 곡선을 결정하는 타이밍 함수, 그리고 시작 전 선택적 지연입니다. 값을 바꾸면 코드가 즉시 갱신되고, 미리보기 상자에 마우스를 올릴 때마다 실제로 애니메이션이 재생되므로 스타일시트에 넣기 전에 동작을 직접 느껴볼 수 있습니다. 결과는 표준 순서인 property duration timing delay를 따르며, 지연이 0이면 값을 깔끔하게 유지하기 위해 생략됩니다.
지속 시간·타이밍·지연 고르기
지속 시간과 지연은 초 단위로 입력하며 0.3이나 0.15 같은 소수를 써서 짧고 경쾌한 상호작용을 만들 수 있습니다. 타이밍 함수는 가속을 조절합니다. ease는 부드럽게 시작하고 끝나며, linear는 일정한 속도를 유지하고, ease-in·ease-out은 한쪽에서 속도를 조절하며, cubic-bezier()로는 원하는 곡선을 직접 만들 수 있습니다. 속성을 all로 두면 애니메이션 가능한 모든 속성이 함께 움직이고, opacity나 transform처럼 하나만 지정하면 효과가 집중되고 성능도 좋아집니다. 같은 입력은 항상 같은 결과를 내므로 값이 예측 가능하고 재사용하기에 안전합니다.
자주 묻는 질문
왜 트랜지션 값에서 지연이 빠져 있나요?
지연 0초는 효과가 없으므로 일부러 생략합니다. 이 경우 "property duration timing"만 출력되며 이것이 가장 깔끔한 올바른 형태입니다. 0이 아닌 지연을 입력하면 맨 뒤에 붙습니다. 예: "opacity 0.5s ease-in-out 0.2s".
모든 속성 대신 하나만 애니메이션하려면 어떻게 하나요?
속성 항목에서 "all" 대신 opacity, transform, background-color처럼 특정 속성을 고르면 됩니다. transform이나 opacity처럼 렌더링 비용이 낮은 속성 하나만 애니메이션하면 보통 "all"보다 더 부드럽습니다.
입력한 내용이 서버로 전송되나요?
아니요. 모든 값은 브라우저 안에서 자바스크립트로 계산됩니다. 입력한 어떤 것도 전송·기록·저장되지 않으며, 페이지가 한 번 로드된 뒤에는 완전히 오프라인으로 동작합니다.