CSS 애니메이션 재생되지 않을 때 요소 스타일 설정하기
웹 페이지에서 CSS 애니메이션을 구현하다 보면, 애니메이션이 시작되기 전이나 종료된 후 요소가 어떤 모습으로 표시될지 고민하게 됩니다. 이럴 때 animation-fill-mode 속성을 사용하면 애니메이션이 재생되고 있지 않는 동안 요소에 적용할 스타일을 간편하게 지정할 수 있습니다.
animation-fill-mode 속성이란?
animation-fill-mode 속성은 @keyframes로 정의한 스타일을 애니메이션 실행 전후에 요소에 유지할지 여부를 결정합니다. 지정할 수 있는 주요 값은 다음과 같습니다.
- none (기본값): 애니메이션이 재생 중이 아닐 때는 keyframes의 스타일이 적용되지 않습니다.
- forwards: 애니메이션이 끝난 후 마지막 keyframe의 스타일이 그대로 유지됩니다.
- backwards: 애니메이션 지연 시간(animation-delay)이 있는 경우, 시작 전에 첫 번째 keyframe의 스타일이 미리 적용됩니다.
- both: forwards와 backwards의 효과가 모두 적용됩니다.
예제
아래 예제는 animation-fill-mode 값을 backwards로 설정했습니다. 이렇게 하면 애니메이션이 실제로 시작되기 전에도 div 요소에 첫 번째 keyframe의 스타일(녹색 배경, 왼쪽 위치)이 적용되어 화면 깜빡임 없이 자연스러운 연출이 가능합니다.
<!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>마무리
animation-fill-mode 속성만 잘 활용해도 애니메이션의 시작과 끝을 매끄럽게 처리할 수 있습니다. 특히 animation-delay와 함께 사용할 때 backwards 또는 both 값을 지정하면, 대기 시간 동안 의도한 초기 상태를 유지할 수 있어 더욱 세련된 UI를 만들 수 있습니다.