주어진 시간에서 전이 효과에 대한 속도 변화를 설정한다.
<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)
로 계산한다.
모든 함수를 표시하지 않을 수도 있다.
설정된 시간 동안 일정한 속도로 전이 효과를 연출한다.
모든 속성을 표시하지 않을 수도 있다.
설정된 애니메이션 실행 시간 내에서 어떠한 흐름(가속과 감속)으로 애니메이션을 실행할지를 설정한다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
천천히 시작하다 빠르게 진행하며 천천히 종료한다.
천천히 효과를 시작한다.
천천히 효과를 시작하고 종료한다.
천천히 효과를 종료한다.
설정된 시간 동안 일정한 속도로 전이 효과를 연출한다.
애니메이션 중 1차원 값이 얼마나 빠르게 변화하는 지를 설명하는 수학 함수를 나타낸다.
주어진 애니메이션 시간을 길이가 동일한 지정된 수의 간격으로 나누어서 동작을 만든다.
object.style.transitionTimingFunction = "linear";
자바스크립트 형식
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Transitons | Last review date: 2022-6-12 |