애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다.

animation-timing-function

animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다.

정의(Definition)

• animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다.
• animation-timing-function 속성은 애니메이션 움직임의 속도를 건너뛰기로 설정할 수 있습니다.
• animation-timing-function 속성은 애니메이션 움직임의 속도를 큐빅 베지어 곡선값으로 설정할 수 있습니다.

애니메이션과 관련된 속성(Animation Related Properties)

• animation 속성은 애니메이션과 관련된 속성을 일괄적으로 설정합니다.
• animation-delay 속성은 애니메이션 지연 시간을 설정합니다.
• animation-direction 속성은 애니메이션 움직임 방향을 설정합니다.
• animation-duration 속성은 애니메이션 움직임 시간을 설정합니다.
• animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다.
• animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다.
• animation-name 속성은 애니메이션 keyframe 이름을 설정합니다.
• animation-play-state 속성은 애니메이션 진행상태를 설정합니다.
• animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다.

문법(Syntax)

animation-timing-function : linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | inherit;

/* 기본 애니메이션 */
animation-timing-function : linear;
animation-timing-function : ease;
animation-timing-function : ease-in;
animation-timing-function : ease-out;
animation-timing-function : ease-in-out;
animation-timing-function : step-start;
animation-timing-function : step-end;
animation-timing-function : steps(int,start|end);
animation-timing-function : cubic-bezier(n,n,n,n);
animation-timing-function : inherit;

속성(Property)

호환성(Compatibility)

						6	7	8	9	10	11
animation-timing-function	○	○	○	○	○	❌	❌	❌	❌	○	○	○	○	○