Style animationTimingFunction 속성

정의 및 사용법

animationTimingFunction 애니메이션의 속도 곡선을 정의합니다。

속도 곡선은 애니메이션이 하나의 CSS 스타일에서 다른 스타일로 변경되는 시간을 정의합니다。

속도 곡선은 평滑한 변화를 위해 사용됩니다。

예제

<div> 요소의 animationTimingFunction 속성 변경：

document.getElementById("myDIV").style.animationTimingFunction = "linear";

직접 시도해 보세요

문법

animationTimingFunction 속성 반환：

오브젝트.style.animationTimingFunction

animationTimingFunction 속성 설정：

오브젝트.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"

속성 값

값 설명
linear 애니메이션의 시작부터 끝까지의 속도는 같습니다。
ease 기본 값。애니메이션은 느리게 시작하고 빠르게 되고, 다시 느리게 끝납니다。
ease-in 애니메이션은 느리게 시작합니다。
ease-out 애니메이션은 느리게 끝납니다。
ease-in-out 애니메이션은 느리게 시작하고 느리게 끝납니다。
셋 세 비셀 비어(, , , )n, n, n, n)

셋 세 비셀 비어 함수에서 자신의 값을 정의합니다。

가능한 값은 0에서 1 사이의 숫자입니다。
initial 이 속성을 기본 값으로 설정합니다. 참고하십시오 initial。
inherit 부모 요소에서 이 속성을 继承합니다. 참고하십시오 inherit。

기술 세부 사항

기본 값： ease
반환 값： 문자열로 요소의 animation-timing-function 속성。
CSS 버전： CSS3

브라우저 지원

animationTimingFunction CSS3 (1999) 기능입니다。

모든 브라우저가 완전히 지원합니다：

챗롬 에지 파이어폭스 사파리 오페라 IE
챗롬 에지 파이어폭스 사파리 오페라 IE
지원 지원 지원 지원 지원 11

관련 페이지

CSS 참조 가이드:animation-timing-function 속성