[CSS] Transition 알아보기

transition의 기능

 

: CSS 속성을 변경할 때 애니메이션 속도를 조절해 줍니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 자연스러운 애니메이션 효과를 만들때 유용합니다.

 

 

 

선언

 

(1)property: 속성

​

(2)duration: 지속시간(ms, s)

​

(3)[timing-function] (생략 가능)

-ease-in

-ease-out

-ease-in-out

-cubic-bezier()

​

(4)[delay] (생략 가능)

​

​

​

​

예시

transition: all 2500ms ease-in 1000ms;