[CSS] TRANSITION

 

트랜지션 : 웹 요소의 스타일 속성이 바뀌는 것

 

transition-property : 트랜지션을 적용할 속성 지정

- all 속성 : 요소의 모든 속성이 트랜지션 대상이 됨 (기본 값)

- none 속성 : 트랜지션 동안 아무 속성도 바뀌지 않음

- <속성 이름> : 트랜지션 효과를 적용할 속성 이름을 지정

                     속성이 여러개일 경우, 쉼표(,)로 구분해여 나열

 

transition-duration : 트랜지션 진행 시간 지정

 

transition-timing-function : 트랜지션 속도 곡선 지정

속성 값	설명
linear	시작부터 끝까지 똑같은 속도로 트랜지션 진행
ease	처음에는 천천히 시작하고 점점 빨라지다가 마지막에는 천천히 끝냄 (기본 값)
ease-in	시작을 느리게 함
ease-out	느리게 끝냄
ease-in-out	느리게 시작하고 느리게 끝냄
cubic-bezier(n, n, n, n)	베지에 함수를 직접 정의해서 사용 (n 값은 0~1)

 

 

transition-delay : 지연 시간 설정

 

transition : 트랜지션 속성 한번에 표기