Transition 정리

Transition

트랜지션은 속성을 서서히 변화시키는 속성입니다.

트랜지션에서 사용할 수 있는 속성 값은 아래와 같습니다.

속성값은 동시에 작성할 수 있습니다.

ex ) transition : property timing-function duration delay

• transition-property : transition을 적용시킬 속성을 정합니다.
• transition-timing-function : transition의 진행속도를 정합니다.
• transition-duration : transition의 총 시간을 정합니다. 초단위를 사용합니다 ex) 1s
• transition-delay : transition의 시작시간을 지연시킵니다. 초단위를 사용합니다 ex) 1s
• initial : 기본값으로 설정합니다.
• inherit : 부모요소의 속성값을 상속 받습니다.

transition-property

• none : 모든 속성에 적용하지 않습니다.
• all : 모든 속성에 적용합니다.
• property : 속성을 정합니다. 여러개의 속성을 지정할 때에는 쉼표로 구분합니다.

transition-timing-function

큐빅베지어에 들어가야 하는 n값을 쉽고 간편하게 알려준다 큐빅베지어 사이트

• ease : 기본값으로, 전환(transition) 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려집니다.
• linear : 효과가 처음부터 끝까지 일정한 속도로 진행됩니다.
• ease-in : 효과가 천천히 시작됩니다.
• ease-out : 효과가 천천히 끝납니다.
• ease-in-out : 효과가 천천히 시작되어 천천히 끝납니다.
• cubic-bezier(n,n,n,n) : 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.