beepbeep

transition 본문

HTML, CSS

transition

삑삑도요 2022. 10. 18. 17:40

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