Functions

Editing

steps(<integer>[, <step-position>])

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

설명

Steps Easing 함수의 값 예시

steps function

매개 변수

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

시간 간격 수를 지정한다. 두 번째 인수의 값이 1보다 큰 양의 정수여야 하는 jump-none이 아닌 한 0보다 큰 양의 정수여야 한다.

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

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

Details

포함된 타입

  • <number-token>

    Number Token Railroad Diagrams

    + - digit . digit digit . digit e E + - digit

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

단계 위치를 지정한다. 타입에서 사용 가능한 키워드를 참고하기 바란다.

  • 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로 작동한다.

구문

animation-timing-function: steps(3, jump-start);
CSS Easing Functions Level 1
Example

버전 명세

Modules
Module NameStatusSummary
CSS Easing Functions Level 1후보 추천 초안

어떤 값의 속도 변화를 제어하는 변환을 정의하는 방법을 설명한다.


Last review date: 2022-6-6

지원 웹브라우저