animationDuration 속성은 애니메이션이 한 사이클(주기)을 완료하는 데 걸리는 시간을 지정하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트를 통해 애니메이션의 재생 속도를 동적으로 변경할 수 있습니다.
문법(Syntax)
animationDuration 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.animationDuration = "time|initial|inherit"
속성 값(Values)
animationDuration 속성에 사용할 수 있는 값은 아래와 같습니다.
| 값 | 설명 |
|---|---|
| time | 애니메이션 한 사이클의 지속 시간을 초(s) 또는 밀리초(ms) 단위로 지정합니다. 기본값은 0이며, 값이 0이면 애니메이션이 재생되지 않습니다. |
| initial | 해당 속성을 브라우저의 기본(initial) 값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받아 사용합니다. |
예제(Example)
다음은 animationDuration 속성을 활용한 예제입니다. 버튼을 클릭하면 원형 요소가 좌측에서 우측으로 이동하며 색상이 변하는 애니메이션의 지속 시간이 5초에서 10초로 늘어납니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 25px;
height: 25px;
border-radius: 50%;
border: 8px solid orange;
position: relative;
animation: ring infinite;
animation-duration: 5s;
}
@keyframes ring {
from {top: 0px; left:0px}
to {border-color: purple; left: 500px;}
}
</style>
<script>
function changeDuration(){
document.getElementById("DIV1").style.animationDuration="10s";
document.getElementById("Sample").innerHTML="애니메이션 지속 시간이 5초에서 10초로 증가했습니다.";
}
</script>
</head>
<body>
<div id="DIV1"></div>
<p>아래 버튼을 클릭하여 애니메이션 지속 시간을 변경해 보세요.</p>
<button onclick="changeDuration()">지속 시간 변경</button>
<p id="Sample"></p>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 주황색 테두리의 원형 요소가 화면에 나타나고, 일정 시간이 지나면 애니메이션이 진행되면서 테두리 색상이 보라색으로 변합니다.
시간이 흐르면서 애니메이션의 색상이 변경되는 모습입니다.
지속 시간 변경 버튼을 클릭하면 애니메이션의 지속 시간이 10초로 늘어나고, 그 결과 안내 문구가 화면에 표시됩니다.
