728x90
CSS 애니메이션 효과 주기 Transition property duration timing-function
Transition-property : 이벤트시 변경 원하는 Property
Transition-duration : 변경 시간
Transition-timing-function : 변경 속도
샘플 예제
.box {
background-color : royalblue;
width : 100px;
height : 100px;
}
.box:hover {
background-color : tomato;
transition-property : background-color;
transition-duration : 500ms;
transition-timing-function : ease;
}
출력 결과
728x90
'프론트엔드 > CSS' 카테고리의 다른 글
[CSS] 짝수/홀수 번째 태그에만 style 효과 주기 (0) | 2021.03.20 |
---|---|
[CSS] 변수 Variable 사용하기! (0) | 2021.03.12 |
[CSS] Background 속성 (0) | 2021.03.04 |
[CSS] transform - Translate 수평, 수직 정렬 (0) | 2021.03.04 |
[CSS] box-sizing border-box content-box (0) | 2021.03.04 |
댓글