CSS 애니메이션-fill-mode: backwards 활용법
CSS에서 요소가 첫 번째 키프레임(first keyframe)에 설정된 스타일 값을 유지하도록 하려면 animation-fill-mode 속성에 backwards 값을 사용합니다.
이 속성은 특히 animation-delay와 함께 사용할 때 유용합니다. 애니메이션이 시작되기 전 지연 시간 동안 요소가 첫 번째 키프레임(from)에 정의된 스타일을 미리 적용한 상태로 표시되기 때문입니다.
주요 속성 값 정리
- none: 기본값으로, 애니메이션 실행 전후에 어떤 스타일도 적용하지 않습니다.
- forwards: 마지막 키프레임(to)의 스타일 값을 애니메이션 종료 후에도 유지합니다.
- backwards: 첫 번째 키프레임(from)의 스타일 값을 애니메이션 시작 전(지연 시간 포함)에 적용합니다.
- both: forwards와 backwards를 모두 적용합니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
position: relative;
background: red;
animation-name: myanim;
animation-duration: 2s;
animation-fill-mode: backwards;
}
@keyframes myanim {
from {left: 0px; background-color: green;}
to {left: 200px; background-color: blue;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>코드 설명
위 예제에서는 크기 150×200px의 빨간색 div 요소에 myanim이라는 이름의 애니메이션을 적용했습니다.
- from 구간: 요소가 왼쪽 0px 위치에서 초록색 배경으로 시작합니다.
- to 구간: 왼쪽 200px 위치까지 이동하며 배경색이 파란색으로 변경됩니다.
animation-fill-mode: backwards가 설정되어 있으므로, 애니메이션에 지연 시간(animation-delay)이 추가될 경우 그 지연 시간 동안 요소는 원래 배경색인 빨간색이 아닌 첫 번째 키프레임의 초록색 상태로 미리 표시됩니다.