CSS_transition

transition

css 속성을 이용한 변화의 전, 후 사이에 애니메이션을 추가해서 움직임을 부드럽게 만들어 줄 수 있음

transition-property

어떤 속성(property)에 transition을 적용할 것 인지를 지정함

transition-property: 속성, transform

📍생략하면 all이 적용됨

transition-duration

transition에 걸리는 시간을 지정함

transition-duration: 0.2s

transition-timing-function

transition의 속도 패턴을 지정함

transition-duration: ease-in-out | linear | ease | ease-in | ease-out

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

transition-delay

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

transition-delay: 2s

📍delay는 초(s), 혹은 밀리초(ms) 단위로 지정이 가능

transition 속성 한번에 적어주기