animationName 속성이란?
animationName 속성은 @keyframes 규칙으로 정의된 애니메이션 이름을 가져오거나 설정하는 데 사용되는 HTML DOM 스타일 속성입니다. 이 속성을 활용하면 자바스크립트를 통해 요소에 적용된 애니메이션을 동적으로 변경할 수 있습니다.
문법(Syntax)
animationName 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.animationName = "none|keyframename|initial|inherit"
속성 값(Value)
animationName 속성에 사용할 수 있는 값은 아래와 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | none 기본값으로, 애니메이션이 적용되지 않음을 의미합니다. |
| 2 | keyframename 선택자(selector)에 바인딩할 @keyframes 이름을 지정합니다. |
| 3 | initial 해당 속성을 초기값(기본값)으로 설정합니다. |
| 4 | inherit 부모 요소의 속성 값을 상속받습니다. |
예제(Example)
다음 예제는 animationName 속성을 사용하여 버튼 클릭 시 애니메이션 이름을 동적으로 변경하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 60px;
height: 40px;
border: 10px groove fuchsia;
position: relative;
animation-name: bravo;
animation-iteration-count:infinite;
animation-duration: 5s;
}
@keyframes bravo {
from {left: 0px; }
to {left: 600px;}
}
@keyframes NEW_FRAME {
from {left:550px; }
to {left: 0px;}
}
</style>
<script>
function nameChange(){
document.getElementById("DIV1").style.animationName="NEW_FRAME";
document.getElementById("Sample").innerHTML="애니메이션 이름이 이제 NEW_FRAME으로 변경되었습니다";
}
</script>
</head>
<body>
<div id="DIV1">SAMPLE TEXT</div>
<p>아래 버튼을 클릭하면 애니메이션 이름이 변경됩니다</p>
<button onclick="nameChange()">CHANGE NAME</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과가 출력됩니다. 처음에는 'bravo' 애니메이션이 적용되어 요소가 왼쪽에서 오른쪽으로 이동합니다.
CHANGE NAME 버튼을 클릭하면 애니메이션 이름이 'NEW_FRAME'으로 변경되어, 이번에는 요소가 오른쪽에서 왼쪽으로 이동하는 것을 확인할 수 있습니다.
정리
animationName 속성은 CSS 애니메이션을 자바스크립트로 제어할 수 있게 해주는 유용한 도구입니다. 사용자 인터랙션(버튼 클릭 등)에 따라 애니메이션을 전환해야 하는 경우, 위 예제처럼 element.style.animationName을 활용하면 간단하게 구현할 수 있습니다.