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
스타일러스를 CSS로 변환
SCSS 코드를 CSS로 변환합니다. 빠르고, 쉽고, 안전합니다.
CSS3 전환 생성기
부드러운 불투명도 전환
완벽한 Flexbox 레이아웃 만들기
직관적인 드래그 앤 드롭 인터페이스를 사용하여 CSS flexbox 코드를 시각화, 사용자 정의 및 생성할 수 있습니다.
CSS3 변환을 쉽게 생성
코드를 작성하지 않고도 복잡한 CSS3 변환을 만들 수 있는 강력하고 직관적인 도구입니다. 변경 사항을 실시간으로 시각화하고 생성된 CSS를 복사하여 프로젝트에 사용할 수 있습니다.
SHA-512/224 해시 계산기
SHA-512/224 해시를 빠르고 쉽게 생성
HEX에서 HSV로
실시간 미리보기를 통해 Hexadecimal과 HSV(Hue, Saturation, Value) 색상 모델 간에 색상을 변환할 수 있습니다.