Properties

Properties

Editing
  • account_tree
  • bug_report

animation-timing-function

설정된 애니메이션 실행 시간 내에서 어떠한 흐름(가속과 감속)으로 애니메이션을 실행할지를 설정한다.

사용 가능한 값 타입

〈easing-function〉

애니메이션 중 1차원 값이 얼마나 빠르게 변화하는 지를 설명하는 수학 함수를 나타낸다. 이를 통해 움직임의 지속 시간에 대한 속도 변화를 줄 수가 있다.

사용되는 키워드

  • ease

    천천히 시작하여 빠르게 가속한 후 천천히 종료한다.

  • ease-in

    천천히 시작하여 끝까지 가속한 다음 종료 시점에 갑자기 중지한다.

  • ease-in-out

    천천히 시작하여 가속했다가 끝으로 갈수록 느려진다.

  • ease-out

    갑자기 빠르게 시작했다가 천천히 종료한다.

관련 함수들

  • cubic-bezier()

    애니메이션 중 1차원 값이 얼마나 빠르게 변화하는 지를 설명하는 수학 함수를 나타낸다.

동일한 타입을 사용하는 관련 속성

  • animation-timing-function

    설정된 애니메이션 실행 시간 내에서 어떠한 흐름(가속과 감속)으로 애니메이션을 실행할지를 설정한다.

  • transition-timing-function

    주어진 시간 내에 전이효과를 어떠한 방식으로 진행(연출)할 지를 설정한다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • easeCSS3

    애니메이션 동작을 천천히 시작하다가 가속이 되면서 빠르게 진행 후 감속 하면서 천천히 종료한다.

    애니메이션 동작을 천천히 시작하다가 가속이 되면서 빠르게 진행 후 감속 하면서 천천히 종료한다.

  • linearCSS3

    애니메이션 동작을 일정한 속도로 진행한다.

    애니메이션 동작을 일정한 속도로 진행한다.

  • ease-inCSS3

    애니메이션 동작을 천천히 시작하다 이후 가속과 함께 빠르게 진행한다.

    애니메이션 동작을 천천히 시작하다 이후 가속과 함께 빠르게 진행한다.

  • ease-outCSS3

    애니메이션 동작을 가속되는 속도로 진행하다가 천천히 종료한다.

    애니메이션 동작을 가속되는 속도로 진행하다가 천천히 종료한다.

  • step-startCSS3

    시작 키프레임을 기준으로 이후 정의된 각 키프레임 순에 의해 애니메이션을 끊어서 진행한다. 키프레임과 키프레임 사이의 동작을 생성하지 않는다.

    시작 키프레임을 기준으로 이후 정의된 각 키프레임 순에 의해 애니메이션을 끊어서 진행한다. 키프레임과 키프레임 사이의 동작을 생성하지 않는다.

  • step-endCSS3

    마지막 키프레임을 기준으로 이후(다시 시작 키프레임부터) 각 키프레임에 정의된 값으로 애니메이션을 끊어서 진행한다. 키프레임과 키프레임 사이의 동작을 생성하지 않는다.

    마지막 키프레임을 기준으로 이후(다시 시작 키프레임부터) 각 키프레임에 정의된 값으로 애니메이션을 끊어서 진행한다. 키프레임과 키프레임 사이의 동작을 생성하지 않는다.

  • 〈easing-function〉steps(int, [start] | [end])CSS3

    인수 int는 애니메이션 동작을 끊은 단계를 숫자로 설정하며 두 번째 인수 start 또는 end는 끊는 출발 기준을 설정한다. 즉 start로 설정하면 시작 키프레임 이후부터 첫번째 인수 만큼의 단계로 동작을 끊어준다. 'end'로 설정하면 끝 키프레임 이후부터(다시 시작 키프레임으로 돌아옴) 첫번째 인수로 설정된 단계만큼 동작을 끊어준다.

    cubic-bezier 함수에 곡선( 3차원 베지어 곡선)을 제어하는 핸들의 0~1 범위 내의 x, y 값을 인수로 사용한다. 인수로 지정되는 네 개의 숫자는 차례대로 곡선의 시작 점을 조정하는 핸들의 x, y와 곡선의 끝점을 조정하는 x, y의 값으로 구성한다.

  • 〈easing-function〉cubic-bezier(n, n, n, n)CSS3

    cubic-bezier 함수에 곡선( 3차원 베지어 곡선)을 제어하는 핸들의 0~1 범위 내의 x, y 값을 인수로 사용한다. 인수로 지정되는 네 개의 숫자는 차례대로 곡선의 시작 점을 조정하는 핸들의 x, y와 곡선의 끝점을 조정하는 x, y의 값으로 구성한다.

    cubic-bezier 함수에 곡선( 3차원 베지어 곡선)을 제어하는 핸들의 0~1 범위 내의 x, y 값을 인수로 사용한다. 인수로 지정되는 네 개의 숫자는 차례대로 곡선의 시작 점을 조정하는 핸들의 x, y와 곡선의 끝점을 조정하는 x, y의 값으로 구성한다.

구문

  • animation-timing-function ease;CSS3

    기본 값이 설정된 경우이며 애니메이션 동작을 천천히 시작하다가 빠르게 가속 진행한 후 감속 하면서 끝날 때는 천천히 종료한다.

  • object.style.animationTimingFunction = "linear";CSS3

    자바스크립트 형식이며 애니메이션 동작을 일정한 속도로 진행한다.

지원 웹브라우저