CSS3 전환 생성기
부드러운 불투명도 전환
인기 있는 프리셋
페이드 효과
부드러운 불투명도 전환
스케일 효과
호버에서 요소 크기 조정
회전 효과
호버에서 요소 회전
슬라이드 효과
요소 위치 이동
색상 변경
배경색 전환
변환 정보
CSS 전환을 사용하면 지정된 기간 동안 속성 값을 원활하게 변경할 수 있습니다.
일반적으로 애니메이션된 속성에는 다음이 포함됩니다.
- 너비, 높이
- 여백, 패딩
- 불투명도, 색상
- transform (scale, rotate, translate)
- background-color
전문가 팁: '모든 속성' 옵션을 사용하여 모든 변경 사항을 애니메이션화합니다.
Preview
HOVER ME
생성된 코드
.element { transition-property: all; transition-duration: 300ms; transition-timing-function: ease; transition-delay: 0ms; } .element:hover { /* Hover styles will be generated here */ }
트랜지션 컨트롤
300
0
호버 효과
100%
100%
0°
0px
0px
8px
8px
Related Tools
Sass to CSS 변환기
Sass 코드를 CSS로 변환합니다. 빠르고, 쉽고, 안전합니다.
완벽한 Flexbox 레이아웃 만들기
직관적인 드래그 앤 드롭 인터페이스를 사용하여 CSS flexbox 코드를 시각화, 사용자 정의 및 생성할 수 있습니다.
스타일러스를 CSS로 변환
SCSS 코드를 CSS로 변환합니다. 빠르고, 쉽고, 안전합니다.
나이 계산기
정확한 나이 계산기로 정확한 나이를 년, 월, 일 단위로 계산하십시오.
스타일러스를 CSS로 변환
SCSS 코드를 CSS로 변환합니다. 빠르고, 쉽고, 안전합니다.
Create Custom Terms and Conditions
웹사이트, 앱 또는 서비스에 맞는 포괄적인 이용 약관을 생성하세요.