16 - transition

CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션

값	의미	기본값
transition-property	전환 효과를 사용할 속성 이름	all
transition-duration	전환 효과의 지속시간 설정	0s
transition-timing-function	타이밍 함수(https://easings.net/ko) 지정	ease
transition-delay	전환 효과의 대기시간 설정	0s

 

보통 바뀌기 전 상태에 transition 추가함.

 

ease : 빠르게-느리게

linear : 일정하게

ease-in : 빠르게-느리게

ease-out : 빠르게-느리게

ease-in-out : 느리게-빠르게-느리게

steps(n) : n번 분할된 애니메이션