🎚️ CSS transition 생성기 | 이징 골라 복사

전환할 속성 1

속성 1 직접 입력 (위에서 직접 입력을 골랐을 때)

속성 1 지속시간

속성 1 지연 (delay)

속성 1 이징 (timing-function)

전환할 속성 2 (선택)

속성 2 지속시간

속성 2 지연 (delay)

속성 2 이징

prefers-reduced-motion 대응 블록 함께 만들기

transition 선언을 속성별로 나눠 쓰기

transition 은 속성·지속시간·이징·지연을 한 묶음으로 쉼표로 이어 적습니다. 속성마다 시간을 다르게 주려면 묶음을 두 개로 나눠야 하는데, 손으로 쓰면 지연 자리와 지속시간 자리를 바꿔 적는 실수가 흔합니다. 여기서는 두 묶음까지 각각 값을 받아 순서가 맞는 선언으로 만듭니다.

적어 주는 값만 씁니다

이 도구는 몇 밀리초가 적당한지 권하지 않습니다. 넣은 값으로만 코드를 만들고, 가장 늦게 끝나는 시점을 ms 로 보여 줍니다. 속성 이름과 묶음 순서는 W3C 의 CSS Transitions 명세를 따르며, 움직임 줄이기 설정을 켠 사용자를 위한 prefers-reduced-motion 블록을 함께 만들 수 있습니다(2026년 10월 기준).

하지 않는 것

단계가 여러 개인 애니메이션은 만들지 않습니다. 중간 지점을 지정하려면 keyframes 쪽 도구가 맞습니다. 커스텀 곡선은 이징 목록에 넣지 않았으므로 cubic-bezier 값은 전용 생성기에서 만들어 붙이세요. 지속시간 0 이하는 전환이 보이지 않는 값이라 입력에서 막습니다.

자주 묻는 질문

속성마다 다른 시간을 주려면 어떻게 적나요?

쉼표로 묶음을 나눠 각각 속성·지속시간·이징·지연을 적습니다. 이 생성기는 두 묶음까지 각 값을 받아 그 순서로 만들어 줍니다.

지속시간과 지연을 적는 순서가 정해져 있나요?

시간 값이 두 개 나오면 앞이 지속시간, 뒤가 지연입니다. 하나만 적으면 지속시간으로 읽힙니다.

transition 과 keyframes 는 어떻게 다른가요?

transition 은 값이 바뀔 때 두 상태 사이를 잇습니다. 중간 단계를 지정하거나 저절로 반복하려면 keyframes 애니메이션이 필요합니다.

🎚️CSS transition 코드 생성기

관련된 도구

CSS 키프레임 애니메이션 코드 생성기

CSS cubic-bezier 이징 곡선 생성기

transition 선언을 속성별로 나눠 쓰기

적어 주는 값만 씁니다

하지 않는 것

자주 묻는 질문

관련된 도구

CSS 키프레임 애니메이션 코드 생성기

CSS cubic-bezier 이징 곡선 생성기

transition 선언을 속성별로 나눠 쓰기

적어 주는 값만 씁니다

하지 않는 것

자주 묻는 질문

같은 카테고리 도구