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