CSS Transition Generator
Configure CSS transitions with hover preview.
전환 1
마우스를 올리세요
.element {
transition: all 0.3s ease 0s;
}
.element:hover {
/* apply your hover styles here */
}이 도구 소개
CSS 전환 생성기는 대상 속성, 지속 시간, 타이밍 함수, 지연을 설정하여 transition 단축 속성을 구성할 수 있습니다. 인터랙티브 미리보기로 코드를 복사하기 전에 전환이 어떻게 작동하는지 확인할 수 있습니다.
CSS 전환은 :hover, :focus 또는 JavaScript를 통한 클래스 변경과 같은 트리거 이벤트에 의해 시작되는 두 CSS 값 사이의 부드러운 상태 변화를 만듭니다.
사용 방법
- 전환할 CSS 속성을 선택하거나 all을 사용하세요.
- 지속 시간을 설정하세요 — 전환이 얼마나 오래 걸리는지 (예: 0.3s).
- 가속 곡선을 제어하는 타이밍 함수를 선택하세요.
- 선택적으로 전환 시작 전 지연을 추가하세요.
- 미리보기 상자에 마우스를 올려 효과를 실시간으로 확인하고 복사하세요.
활용 사례
개발자는 버튼 호버 효과, 카드 스케일 업, 네비게이션 링크의 부드러운 색상 변화에 전환을 사용합니다. 폼 디자이너는 입력 포커스 스타일에, 사이드바 컴포넌트는 슬라이드인/아웃에 사용합니다.
자주 묻는 질문
- transition과 animation의 차이점은 무엇인가요? — 전환은 상태 변화(예: 호버)에 반응하고, 애니메이션은 키프레임을 사용하여 자동으로 또는 루프로 실행됩니다.
- 여러 속성을 전환할 수 있나요? — 예. 전환 추가를 클릭하여 쉼표로 구분된 여러 속성 규칙을 추가할 수 있습니다.
- 어떤 속성을 전환할 수 있나요? — 숫자 값이 있는 대부분의 속성(opacity, color, transform, 크기 등)을 전환할 수 있습니다. display 같은 속성은 전환할 수 없습니다.