animationTimingFunction은 주기 동안 애니메이션이 진행되는 방식을 지정하는 데 사용됩니다. 애니메이션에 대한 속도 곡선을 설정하거나 반환하면 됩니다. 속도 곡선은 애니메이션이 한 상태에서 다른 상태로 이동하는 데 걸리는 시간을 지정하여 전환이 얼마나 부드러운지를 정의합니다.
구문
다음은 −
의 구문입니다.animationTimingFunction 속성 설정 -
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
값
다음은 값입니다 -
| Sr.No | 값 및 설명 |
|---|---|
| 1 | 선형 이것은 애니메이션이 애니메이션이 진행되는 동안 동일한 속도를 갖도록 지정합니다. |
| 2 | 편리함 애니메이션의 시작과 끝이 느리지만 중간에 더 빠름을 지정하는 기본값입니다. |
| 3 | 이용성 애니메이션 시작이 느립니다. |
| 4 | 이즈아웃 애니메이션의 끝이 느립니다. |
| 5 | 이즈 인 아웃 애니메이션은 처음에는 느리고 마지막에도 느립니다. |
| 6 | 3차 베지어(n, n, n,n) 사용자 정의 값에 대한 3차 베지어 함수를 정의합니다. |
| 7 | 초기 이 속성을 초기 값으로 설정합니다. |
| 8 | 상속 상위 속성 값을 상속합니다. |
예시
animationTimingFunction 속성의 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<head>
<style>
#PARA1{
border: 2px solid black;
position: relative;
animation: demo 5s infinite;
animation-timing-function: linear;
}
@keyframes demo {
from {background-color: lightcoral; color:black;}
to {background-color: indigo; color:white;}
}
</style>
<script>
function timingChange(){
document.getElementById("PARA1").style.animationTimingFunction="ease";
document.getElementById("Sample").innerHTML="The animation timing is now set to ease.";
}
</script>
</head>
<body>
<p id="PARA1">
Lacus vel facilisis volutpat est velit. Id interdum velit laoreet id donec ultrices.
Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Viverra nibh cras
pulvinar mattis nunc sed blandit libero.</p>
<p>Click the below button to change the above animation name</p>
<button onclick="timingChange()">CHANGE TIMING</button>
<p id="Sample"></p>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
CHANGE TIMING 버튼을 클릭하면 -
