CSS / 애니메이션 / transition / transition-timing-function - transition 진행 속도 조절하는 속성

transition-timing-function

  • transition-timing-function으로 transition의 진행 속도를 조절할 수 있습니다.
  • IE는 버전 10부터 지원합니다.

문법

  • 기본값은 ease입니다.
  • ease : cubic-bezier( 0.25, 0.1, 0.25, 1 )과 같습니다.
  • linear : cubic-bezier( 0, 0, 1, 1 )과 같습니다.
  • ease-in : cubic-bezier( 0.42, 0, 1, 1 )과 같습니다.
  • ease-out : cubic-bezier( 0, 0, 0.58, 1 )과 같습니다.
  • ease-in-out : cubic-bezier( 0.42, 0, 0.58, 1 )과 같습니다.
  • step-start : steps( 1, start )와 같습니다.
  • step-end : steps( 1, end )와 같습니다.
  • steps( n, start|end ) : n단계로 나누어서 변화시킵니다. start 또는 end를 입력하지 않음녀 end로 처리합니다.
  • cubic-bezier( n, n, n, n ) : n에는 0부터 1까지의 수를 넣습니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제 1

  • ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end를 비교하는 예제입니다.
  • 체크박스에 체크하면 애니메이션이 시작되고, 체크를 해제하면 원래대로 돌아옵니다.

예제 2

  • steps( n, start|end )를 이용하여 4단계로 나누어 변화시키는 예제입니다.
  • start로 설정한 경우 각 단계를 시작할 때, end로 설정한 경우 각 단계가 끝날 때 변화시킵니다.

cubic-bezier( n, n, n, n )

  • cubic-bezier( n, n, n, n )를 사용할 때 n에 들어갈 값은 http://cubic-bezier.com에서 찾을 수 있습니다.
  • 점을 움직여서 원하는 커브를 만들고, 상단에 있는 수를 사용합니다.