CSS transition 정리

transition

어떤 요소의 클릭이나 hover와 같은 이벤트를 줄 때 자연스럽게 UI가 바뀌게 해주는 것

transition-property

어떠한 속성(property)에 transition을 적용할 것인지 지정한다.

transition-property : color, transform

transition-duration

transition에 걸리는 시간을 지정한다.
초 -> s
밀리초 -> ms

transition-timing-function

transition의 속도 패턴을 지정한다.
속도가 일정한 속도로 일어날 것인지, 빠르게 시작해서 느리게 끝날 것인지

linear : 일정한 속도로 변환한다.
ease : 시작할 때는 빨라지다 느려진다.
ease-in : 천천히 시작했다가, 속도를 높여 끝난다.
ease-out: 빠른 속도로 시작했다가, 천천히 끝난다.
ease-in-out: 천천히 시작했다가, 정상속도가 됐다가, 빠르게 끝난다.

transition-delay

transition 요청을 받은 후, 실제로 실행되기까지 기다려야하는 시간의 양을 지정한다.

transtion-delay: 2s

transition 단축 속성

transition : color 0.4s ease-in-out 1s

** 대부분의 transtion 속성은 단축속성을 이용해서 사용하게 된다.