CSS 트랜지션 생성기
속성·지속 시간·타이밍 함수·지연으로 transition 축약형을 만들고, 마우스 오버 미리보기와 직접 만드는 cubic-bezier()까지 지원합니다.
아래 상자에 마우스를 올리면 트랜지션을 미리 볼 수 있습니다.
transition: all 0.3s ease;transition: all 0.3s ease;
transition 축약형을 이루는 네 가지 값
이 생성기는 네 가지 값으로 바로 붙여넣을 수 있는 CSS transition 축약형을 만듭니다. 애니메이션할 속성, 지속 시간(초), 속도 곡선을 결정하는 타이밍 함수, 그리고 필요하면 넣는 시작 전 지연입니다. 값을 바꾸면 코드가 즉시 갱신되고, 미리보기 상자에 마우스를 올릴 때마다 실제로 애니메이션이 재생되므로 스타일시트에 넣기 전에 동작을 직접 느껴볼 수 있습니다. ‘미리보기 조건’에서 마우스 올리기 (:hover), 포커스 (:focus), 클릭으로 켜고 끄는 클래스 (.is-active) 중 무엇이 트랜지션을 일으킬지 고를 수 있고 — 터치 화면에서는 마지막 것을 쓰면 됩니다 — 페이지가 써 주는 두 번째 규칙도 그 선택을 따릅니다. ‘미리보기 뒤 배경’은 CSS를 건드리지 않고 미리보기 뒤를 이 페이지 그대로, 흰색, 검은색, 체크무늬, 직접 고른 색으로 바꿉니다. 결과는 표준 순서인 property duration timing delay를 따르며, 지연이 0이면 값을 깔끔하게 유지하기 위해 생략됩니다.
지속 시간·타이밍·지연 고르기
지속 시간과 지연은 초 단위로 입력하며 0.3이나 0.15 같은 소수를 써서 짧고 경쾌한 상호작용을 만들 수 있습니다. ‘시간 단위’를 밀리초 (ms)로 바꾸면 칸에 있던 값도 환산되어 밀리초로 바뀝니다. 타이밍 함수는 가속을 조절합니다. ease는 부드럽게 시작하고 끝나며, linear는 일정한 속도를 유지하고, ease-in·ease-out은 한쪽에서 속도를 조절하며, cubic-bezier()로는 원하는 곡선을 직접 만들 수 있습니다. 속성을 all로 두면 애니메이션 가능한 모든 속성이 함께 움직이고, opacity나 transform처럼 하나만 지정하면 효과가 집중되고 성능도 좋아집니다. 숫자 네 개를 입력하는 대신 두 핸들을 끌어 cubic-bezier() 곡선을 만들려면 Cubic Bezier 생성기를 쓰세요.
자주 묻는 질문
왜 트랜지션 값에서 지연이 빠져 있나요?
지연 0초는 효과가 없으므로 일부러 생략합니다. 이 경우 "property duration timing"만 출력되며 이것이 가장 깔끔한 올바른 형태입니다. 0이 아닌 지연을 입력하면 맨 뒤에 붙습니다. 예: "opacity 0.5s ease-in-out 0.2s".
모든 속성 대신 하나만 애니메이션하려면 어떻게 하나요?
속성 항목에서 "all" 대신 opacity, transform, background-color처럼 특정 속성을 고르면 됩니다. transform이나 opacity처럼 렌더링 비용이 낮은 속성 하나만 애니메이션하면 보통 "all"보다 더 부드럽습니다.
변하기 전후 값을 넣거나 밀리초로 쓸 수 있나요?
네. 속성에 시작 값과 끝 값을 넣으면 그 값을 바꾸는 두 번째 규칙까지 함께 써 주며, 그 선택자는 ‘미리보기 조건’에 따라 :hover, :focus, .is-active 중 하나가 됩니다. “직접 입력…”을 고르면 아무 속성 이름이나 넣을 수 있고, 시간 단위는 초나 밀리초로 고를 수 있습니다.
타이밍 곡선을 직접 만들거나, 예제에서 시작하거나, 만든 트랜지션을 다른 사람에게 보낼 수 있나요?
네. 타이밍 함수에서 ‘cubic-bezier 직접 만들기…’를 고르면 곡선의 제어점을 넣는 칸이 열리고 옆에 곡선이 그려집니다. 세로 값은 범위를 넘어 튕기는 효과를 낼 수 있고, 미리보기도 같은 곡선으로 움직입니다. ‘예제에서 시작’은 ‘카드 들어 올리기’나 ‘살짝 튕기며 커지기’처럼 시작 값과 끝 값까지 갖춘 트랜지션을 채워 줍니다. ‘링크 복사’는 모든 줄과 시간 단위를 링크에 담아 주며, 줄의 내용은 입력하는 동안 주소창에 쓰이지 않습니다.
포커스나 클릭으로 일어나는 트랜지션을 미리 보거나, 실제 배경에서 볼 수 있나요?
네. ‘미리보기 조건’에서 무엇이 미리보기를 일으킬지 고릅니다 — 마우스 올리기 (:hover), 포커스 (:focus)(상자를 클릭하거나 Tab으로 옮겨 가면 됩니다), 클릭으로 켜고 끄는 클래스 (.is-active)이며, 마지막 것은 탭으로도 켜지므로 터치 화면에서 쓰면 됩니다. CSS의 두 번째 규칙도 그 선택자로 쓰이고, 끝 값 칸에는 어느 상태인지 적힙니다. ‘미리보기 뒤 배경’은 미리보기 뒤를 이 페이지 그대로, 흰색, 검은색, 투명을 확인하는 체크무늬, 직접 고른 색으로 바꾸며, 미리보기 배경만 바꿀 뿐 CSS에는 들어가지 않습니다.