Notice
Recent Posts
Recent Comments
Link
beepbeep
transition 본문
1) transition-duration: n s transition의 시작부터 끝까지 걸리는 시간을 지정
2) transition-delay: n s transition이 시작될때까지의 시간을 지정
3) transition-timing-function : transition의 시간당 변형 속도를 조절
베지어 곡선?을 이용해서 시간당 변형 속도를 조절할 수 있음.
* cubic-bezier()의 4개 파라미터는 각각 위의 p0, p1, p2, p3를 의미한다
- linear : 일정하게 / cubic-bezier( 0, 0, 1, 1
- ease(기본값) : 처음과 끝은 느리고 중간은 빠르게 / cubic-bezier( 0.25, 0.1, 0.25, 1 )
- ease-in : 점점 빨라지게 / cubic-bezier( 0.42, 0, 1, 1 )
- ease-out : 점점 느려지게 / cubic-bezier( 0, 0, 0.58, 1 )
- ease-in-out : ease와 비슷하나 완만하고 부드러움 / cubic-bezier( 0.42, 0, 0.58, 1 )
- cublic-bezier(n,n,n,n) 직접 조절
'HTML, CSS' 카테고리의 다른 글
2차원 변형하기 (0) | 2022.10.18 |
---|---|
3차원 변형하기 (0) | 2022.10.18 |
flex-item 전용 속성 (0) | 2022.10.18 |
CSS flex (0) | 2022.10.11 |
CSS 선택자 우선순위 (0) | 2022.10.10 |