설정된 애니메이션 실행 시간 내에서 어떠한 흐름(가속과 감속)으로 애니메이션을 실행할지를 설정한다.
<easing-function>#
<animation-name>
설정 수에 따라 하나 이상의 <easing-function>
을 콤마로 구분해서 작성할 수 있다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
애니메이션 중 1차원 값이 얼마나 빠르게 변화하는 지를 설명하는 수학 함수를 나타낸다. 이를 통해 움직임의 지속 시간에 대한 속도 변화를 줄 수가 있다.
linear | <cubic-bezier-easing-function> | <step-easing-function>
3차 베지어 곡선을 나타내는 값으로 움직임이 발생시 속도 변화를 나타낸다.
ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)
천천히 시작하다 빠르게 진행하며 천천히 종료한다.
천천히 효과를 시작한다.
천천히 효과를 시작하고 종료한다.
천천히 효과를 종료한다.
모든 함수를 표시하지 않을 수도 있다.
입력된 시간을 길이가 동일한 지정된 수의 간격으로 나누는 <easing-function>
일종이다.
step-start | step-end | steps(<integer>[, <step-position>]?)
<number-token>
유형 플래그가 'integer
'인 소숫점이 없는 정수를 표현한다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
주어진 시간을 일정 간격으로 나누어서 애니메이션을 진행시 단계 위치를 지정하는 키워드를 나타낸다.
jump-start | jump-end | jump-none | jump-both | start | end
jump-end로 작동한다.
첫 번째 상승은 입력 진행 값 0에서 발생하고 마지막 상승은 입력 진행 값 1에서 발생한다.
모든 상승은 (0, 1) 범위 내에서 발생한다.
마지막 상승은 입력 진행 값 1에서 발생한다.
첫 번째 상승은 입력 진행률 값이 0일 때 발생한다.
jump-start로 작동한다.
steps(1, end)
로 계산한다.
steps(1, start)
로 계산한다.
모든 함수를 표시하지 않을 수도 있다.
설정된 시간 동안 일정한 속도로 전이 효과를 연출한다.
모든 속성을 표시하지 않을 수도 있다.
주어진 시간에서 전이 효과에 대한 속도 변화를 설정한다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
천천히 시작하다 빠르게 진행하며 천천히 종료한다.
애니메이션 동작을 천천히 시작하다가 가속이 되면서 빠르게 진행 후 감속 하면서 천천히 종료한다.
설정된 시간 동안 일정한 속도로 전이 효과를 연출한다.
애니메이션 동작을 일정한 속도로 진행한다.
천천히 효과를 시작한다.
애니메이션 동작을 천천히 시작하다 이후 가속과 함께 빠르게 진행한다.
천천히 효과를 종료한다.
애니메이션 동작을 가속되는 속도로 진행하다가 천천히 종료한다.
steps(1, start)
로 계산한다.
시작 키프레임을 기준으로 이후 정의된 각 키프레임 순에 의해 애니메이션을 끊어서 진행한다. 키프레임과 키프레임 사이의 동작을 생성하지 않는다.
steps(1, end)
로 계산한다.
마지막 키프레임을 기준으로 이후(다시 시작 키프레임부터) 각 키프레임에 정의된 값으로 애니메이션을 끊어서 진행한다. 키프레임과 키프레임 사이의 동작을 생성하지 않는다.
주어진 애니메이션 시간을 길이가 동일한 지정된 수의 간격으로 나누어서 동작을 만든다.
인수 int는 애니메이션 동작을 끊은 단계를 숫자로 설정하며 두 번째 인수 start 또는 end는 끊는 출발 기준을 설정한다. 즉 start로 설정하면 시작 키프레임 이후부터 첫번째 인수 만큼의 단계로 동작을 끊어준다. 'end'로 설정하면 끝 키프레임 이후부터(다시 시작 키프레임으로 돌아옴) 첫번째 인수로 설정된 단계만큼 동작을 끊어준다.
cubic-bezier 함수에 곡선( 3차원 베지어 곡선)을 제어하는 핸들의 0~1 범위 내의 x, y 값을 인수로 사용한다. 인수로 지정되는 네 개의 숫자는 차례대로 곡선의 시작 점을 조정하는 핸들의 x, y와 곡선의 끝점을 조정하는 x, y의 값으로 구성한다.
첫 번째 상승은 입력 진행률 값이 0일 때 발생한다.
마지막 상승은 입력 진행 값 1에서 발생한다.
첫 번째 상승은 입력 진행 값 0에서 발생하고 마지막 상승은 입력 진행 값 1에서 발생한다.
모든 상승은 (0, 1) 범위 내에서 발생한다.
jump-start로 작동한다.
jump-end로 작동한다.
animation-timing-function: ease;
기본 값이 설정된 경우이며 애니메이션 동작을 천천히 시작하다가 빠르게 가속 진행한 후 감속 하면서 끝날 때는 천천히 종료한다.
object.style.animationTimingFunction = "linear";
자바스크립트 형식이며 애니메이션 동작을 일정한 속도로 진행한다.
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Animations Level 1 | 초안 작업 | Last review date: 2022-12-6 |