1. Css Transition

1. css의 속성을 변경할 때 사용 한다.
2. 속성 변경이 즉시 영향을 미치게 할 수 있다.
3. 속성의 변화가 일정 기간에 미치게 할 수도 있다.

2. Transition의 속성

1. transition-property : 트랜지션의 대상이 되는 css 프로퍼티를 지정한다 (기본값 : all)
2. transiton-duration : 트랜지션이 일어나는 지속시간을 설정할 수 있다. (기본값 : 0s)
3. transition-timing-function : 트랜지션 효과를 위한 수치 함수를 저장한다. (기본값 : ease)
4. transition-delay : 프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 지정한다.(기본값 : 0s)
5. transition : 모든 트랜지션 프로퍼티를 한번에 저장한다.
   • (transition: property duration function delay) 값을 지정하지 않으면 기본값으로 지정이 된다.
   • duration은 필수로 지정해야한다. 기본값이 0이기 때문에 지정하지않으면 실행되지 않음.

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

  https://matthewlein.com/tools/ceaser ← 손쉽게 커스텀이 가능하다.