인기 있는 프리셋
페이드 효과
부드러운 불투명도 전환
스케일 효과
호버에서 요소 크기 조정
회전 효과
호버에서 요소 회전
슬라이드 효과
요소 위치 이동
색상 변경
배경색 전환
변환 정보
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