Properties

Properties

Editing
  • account_tree
  • bug_report

animation-timing-function

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

사용 가능한 값 타입

<'animation-timing-function'>

DEVDIC-Specified Data Types

animation-timing-function 속성에 사용되는 타입이다.

  • CSS Animations Level 1
    <easing-function>#

    <animation-name> 설정 수에 따라 하나 이상의 <easing-function>을 콤마로 구분해서 작성할 수 있다.

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <easing-function>

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

    • CSS Animations Level 1
      linear | <cubic-bezier-easing-function> | <step-easing-function>
    Details

    포함된 타입

    • <cubic-bezier-easing-function>

      3차 베지어 곡선을 나타내는 값으로 움직임이 발생시 속도 변화를 나타낸다.

      • CSS Easing Functions Level 1
        ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)
      Details

      사용되는 키워드

      • ease

        CSS Easing Functions Level 1

        천천히 시작하다 빠르게 진행하며 천천히 종료한다.

      • ease-in

        CSS Easing Functions Level 1

        천천히 효과를 시작한다.

      • ease-in-out

        CSS Easing Functions Level 1

        천천히 효과를 시작하고 종료한다.

      • ease-out

        CSS Easing Functions Level 1

        천천히 효과를 종료한다.

      관련 함수

      모든 함수를 표시하지 않을 수도 있다.

    • <step-easing-function>

      입력된 시간을 길이가 동일한 지정된 수의 간격으로 나누는 <easing-function> 일종이다.

      • CSS Easing Functions Level 1
        step-start | step-end | steps(<integer>[, <step-position>]?)
      Details

      포함된 타입

      • <integer>

        <number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.

        • [HYPHEN-MINUS]?[0-9]

          0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.

        Details

        포함된 타입

        • <number-token>

          Number Token Railroad Diagrams

          + - digit . digit digit . digit e E + - digit
      • <step-position>

        주어진 시간을 일정 간격으로 나누어서 애니메이션을 진행시 단계 위치를 지정하는 키워드를 나타낸다.

        • CSS Easing Functions Level 1
          jump-start | jump-end | jump-none | jump-both | start | end
        Details

        사용되는 키워드

        • end

          jump-end로 작동한다.

        • jump-both

          첫 번째 상승은 입력 진행 값 0에서 발생하고 마지막 상승은 입력 진행 값 1에서 발생한다.

        • jump-done

          모든 상승은 (0, 1) 범위 내에서 발생한다.

        • jump-end

          마지막 상승은 입력 진행 값 1에서 발생한다.

        • jump-start

          첫 번째 상승은 입력 진행률 값이 0일 때 발생한다.

        • start

          jump-start로 작동한다.

      사용되는 키워드

      • step-end

        steps(1, end)로 계산한다.

      • step-start

        steps(1, start)로 계산한다.

      관련 함수

      모든 함수를 표시하지 않을 수도 있다.

    사용되는 키워드

    • linear

      CSS Easing Functions Level 1

      설정된 시간 동안 일정한 속도로 전이 효과를 연출한다.

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

    모든 속성을 표시하지 않을 수도 있다.

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

  • CSS Animations Level 1

    천천히 시작하다 빠르게 진행하며 천천히 종료한다.

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

    Example
  • CSS Animations Level 1

    설정된 시간 동안 일정한 속도로 전이 효과를 연출한다.

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

    Example
  • CSS Animations Level 1

    천천히 효과를 시작한다.

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

    Example
  • CSS Animations Level 1

    천천히 효과를 종료한다.

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

    Example
  • CSS Animations Level 1

    steps(1, start)로 계산한다.

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

    Example
  • CSS Animations Level 1

    steps(1, end)로 계산한다.

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

    Example
  • CSS Animations Level 1

    주어진 애니메이션 시간을 길이가 동일한 지정된 수의 간격으로 나누어서 동작을 만든다.

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

    Example
  • 〈cubic-bezier-easing-function〉cubic-bezier(n, n, n, n)
    CSS Animations Level 1

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

    Example
  • 첫 번째 상승은 입력 진행률 값이 0일 때 발생한다.

  • 마지막 상승은 입력 진행 값 1에서 발생한다.

  • 첫 번째 상승은 입력 진행 값 0에서 발생하고 마지막 상승은 입력 진행 값 1에서 발생한다.

  • 모든 상승은 (0, 1) 범위 내에서 발생한다.

  • jump-start로 작동한다.

  • jump-end로 작동한다.

구문

  • animation-timing-function: ease;
    CSS3

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

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

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

버전 명세

Modules
Module NameStatusSummary
CSS Animations Level 1초안 작업

Last review date: 2022-12-6

지원 웹브라우저