CSS Transtions를 사용하면 주어진 duration동안 property values가 스무스~~하게 변한다.
(* duration을 안정해주면 default 값으로 0초가 설정되기 때문에 아무런 변화가 일어나지 않는다!)
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
Change Several Property Values
The following example adds a transition effect for both the width and height property, with a duration of 2 seconds for the width and 4 seconds for the height:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 4s;
}
div:hover {
width: 300px;
height: 300px;
}
이렇게 하면 div에 hover했을 때 부드럽게~ 너비와 높이가 변한다. 너비는 2초동안 높이는 4초동안.
Specify the Speed Curve of the Transition
animation과 같이 transition도 transition-timing-function 속성이 있어서 transition 효과의 speed curve를 설정할 수 있다. transition-timing-function 속성이 가지는 values:
- ease: slow start->fast->slow end (default)
- linear: 시작부터 끝까지 같은 속도
- ease-in: slow start
- ease-out: slow end
- ease-in-out: slow start -> slow end
- cubic-bezier(n,n,n,n): 직접 설정 가능
Delay the Transition Effect
transition-delay property 또한 animation 때와 같이 잠시 delay 했다가 효과 시작하고 싶을 때.
div {
width: 100px;
height: 100px;
background: red;
transition: width 3s;
transition-delay: 1s;
}
div:hover {
width: 300px;
}
Transition + Transformation
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
}
transform과 합쳐져서 width 300px로 2초동안, height 300px로 이초동안
180도 회전 transform도 2초동안
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s linear 1s;
}
div:hover {
width: 300px;
}
transition도 shorthand로 적을 수 있다.
뭐가 transition 되기 원하는지 | duration | speed curve | delay
'CSS > learned_it_today' 카테고리의 다른 글
CSS Grid 수업 필기(2) Spanning Columns and Rows (0) | 2020.07.05 |
---|---|
CSS Grid 수업 필기(1) grid-template-columns, grid-template-rows (0) | 2020.07.05 |
CSS Animations (0) | 2020.07.01 |
Box Shadow (0) | 2020.07.01 |
before & after Pseudo Selector (feat.포토샵 없이 배경 이미지 흐리게) (0) | 2020.07.01 |