animationFillMode 속성은 CSS 애니메이션이 실행되지 않는 시간 구간, 즉 애니메이션이 시작되기 전(지연 시간 동안)과 종료된 이후에 요소에 어떤 스타일이 적용될지를 지정하는 데 사용됩니다. 이 속성을 활용하면 애니메이션 시작 전후의 요소 스타일을 세밀하게 제어할 수 있어, 화면 전환이 자연스럽고 일관된 UI를 만드는 데 큰 도움이 됩니다.
문법(Syntax)
animationFillMode 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit";
속성값(Value)
animationFillMode 속성에 사용할 수 있는 값은 다음과 같습니다.
| 값 | 설명 |
|---|---|
| none | 애니메이션이 시작되기 전이나 종료된 후 대상 요소에 어떤 스타일도 적용하지 않습니다. 기본(default)값입니다. |
| forwards | 애니메이션이 종료된 후 마지막 키프레임(last keyframe)의 스타일을 대상 요소에 유지·적용합니다. |
| backwards | 애니메이션 시작 전 지연 시간 동안 첫 번째 키프레임(first keyframe)의 스타일을 대상 요소에 적용합니다. |
| both | forwards와 backwards 규칙을 모두 적용합니다. 즉, 시작 전에는 첫 키프레임 스타일이, 종료 후에는 마지막 키프레임 스타일이 유지됩니다. |
| initial | 이 속성을 기본(initial)값으로 설정합니다. |
| inherit | 부모 요소로부터 이 속성값을 상속받습니다. |
예제(Example)
다음은 animationFillMode 속성의 동작을 확인할 수 있는 예제입니다. 버튼을 클릭하면 JavaScript로 fill-mode 값을 backwards로 변경합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 30px;
width: 30px;
background-color: orange;
animation: small 4s;
animation-fill-mode: forwards;
}
@keyframes small {
0% {
width: 200px;
height: 200px;
background-color: white;
}
33% {
background-color: green;
}
66% {
background-color: violet;
}
100% {
background-color: darkred;
}
}
</style>
<script>
function changeFillMode(){
document.getElementById("DIV1").style.animationFillMode="backwards";
document.getElementById("Sample").innerHTML="애니메이션 fill-mode가 backwards로 변경되었습니다.";
}
</script>
</head>
<body>
<div id="DIV1"></div>
<p>아래 버튼을 클릭하면 위 애니메이션의 fill-mode 속성이 변경됩니다.</p>
<button onclick="changeFillMode()">CHANGE FILL</button>
<p id="Sample"></p>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
애니메이션이 종료되면 마지막 키프레임에 해당하는 진한 붉은색(darkred)으로 사각형이 표시됩니다. 이는 forwards 값이 마지막 키프레임 스타일을 유지하기 때문입니다.
이후 CHANGE FILL 버튼을 클릭하면 fill-mode가 backwards로 변경되면서 사각형의 색상이 첫 번째 키프레임인 주황색(orange)으로 바뀌는 것을 확인할 수 있습니다.
참고 사항
주의: 이 속성은 Internet Explorer(IE), Edge(구버전) 및 Safari 브라우저에서는 지원되지 않습니다. 크로스 브라우저 호환성이 중요한 프로젝트라면 벤더 프리픽스(-webkit-animation-fill-mode 등) 사용 여부를 반드시 확인하시기 바랍니다.