CSS 애니메이션 채우기 모드(animation-fill-mode)란?
CSS에서 애니메이션의 채우기 모드를 설정하려면 animation-fill-mode 속성을 사용합니다. 이 속성은 애니메이션이 실행되기 전이나 종료된 후에 요소에 어떤 스타일이 적용될지 결정합니다.
animation-fill-mode 속성에 사용할 수 있는 주요 값은 다음과 같습니다.
- none — 기본값입니다. 애니메이션이 실행되지 않는 동안에는 키프레임의 스타일이 요소에 적용되지 않습니다.
- forwards — 애니메이션이 종료된 후에도 마지막 키프레임(to)의 스타일이 그대로 유지됩니다.
- backwards — 애니메이션이 시작되기 전(지연 시간 포함)에 첫 번째 키프레임(from)의 스타일이 미리 적용됩니다.
- both — forwards와 backwards가 모두 적용되어 양방향으로 스타일이 유지됩니다.
animation-fill-mode 설정 예제
다음 코드는 div 요소에 애니메이션을 적용하고, fill-mode를 forwards로 설정한 예제입니다. 애니메이션이 끝난 후에도 요소는 마지막 상태(파란색 배경, 오른쪽으로 이동한 위치)를 유지합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
position: relative;
background: red;
animation-name: myanim;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes myanim {
from {left: 0px; background-color: green;}
to {left: 200px; background-color: blue;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>예제 동작 방식 설명
위 예제에서 div 요소는 왼쪽에서 오른쪽으로 200px 이동하면서 배경색이 초록색에서 파란색으로 변합니다. animation-fill-mode: forwards;가 지정되어 있기 때문에 애니메이션이 2초간 실행된 후 종료되더라도 요소는 원래 상태로 돌아가지 않고, 마지막 키프레임의 스타일인 파란색 배경과 이동된 위치를 계속 유지하게 됩니다.
만약 fill-mode를 설정하지 않거나 none으로 지정하면, 애니메이션이 끝나는 순간 요소는 즉시 원래의 빨간색 배경과 초기 위치로 되돌아갑니다.