animationTimingFunction 속성은 애니메이션이 한 주기 동안 어떤 방식으로 진행될지를 지정하는 데 사용됩니다. 이 속성은 애니메이션의 속도 곡선(speed curve)을 설정하거나 반환하는 역할을 하며, 속도 곡선은 애니메이션이 한 상태에서 다른 상태로 전환되는 데 걸리는 시간을 정의함으로써 전환의 부드러움 정도를 결정합니다.
문법(Syntax)
animationTimingFunction 속성을 설정하는 문법은 다음과 같습니다.
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
속성 값
animationTimingFunction 속성에 사용할 수 있는 값은 다음과 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | linear 애니메이션이 시작부터 끝까지 일정한 속도로 진행됩니다. |
| 2 | ease 기본값으로, 애니메이션이 느리게 시작하여 중간에는 빨라지고 다시 느리게 끝납니다. |
| 3 | ease-in 애니메이션이 느린 속도로 시작됩니다. |
| 4 | ease-out 애니메이션이 느린 속도로 끝납니다. |
| 5 | ease-in-out 애니메이션이 시작과 끝 모두에서 느리게 진행됩니다. |
| 6 | cubic-bezier(n, n, n, n) 사용자가 직접 정의한 커스텀 값으로 cubic-bezier 함수를 지정할 수 있습니다. |
| 7 | initial 이 속성을 기본(initial) 값으로 설정합니다. |
| 8 | inherit 부모 요소의 속성 값을 상속받습니다. |
예제
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="애니메이션 타이밍이 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>아래 버튼을 클릭하면 위 애니메이션의 타이밍 함수가 변경됩니다</p>
<button onclick="timingChange()">타이밍 변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
타이밍 변경 버튼을 클릭하면 애니메이션의 타이밍 함수가 linear에서 ease로 전환되어, 애니메이션이 느리게 시작하고 빠르게 진행된 후 다시 느리게 끝나는 것을 확인할 수 있습니다.
