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
완벽한 Flexbox 레이아웃 만들기
직관적인 드래그 앤 드롭 인터페이스를 사용하여 CSS flexbox 코드를 시각화, 사용자 정의 및 생성할 수 있습니다.
스타일러스를 CSS로 변환
SCSS 코드를 CSS로 변환합니다. 빠르고, 쉽고, 안전합니다.
CSS3 전환 생성기
부드러운 불투명도 전환
볼륨 단위 변환기
요리, 엔지니어링 및 과학적 요구 사항에 맞게 정밀하게 다양한 부피 단위 간에 변환합니다
MD2 해시 생성기
이 온라인 도구를 사용하여 MD2 해시를 빠르고 쉽게 생성하십시오. 안전하고 신뢰할 수 있으며 즉각적인 결과를 제공합니다.
EnergyUnit 변환
서로 다른 에너지 단위 사이를 정확하고 쉽게 변환