CSS animation-fill-mode 속성이란?
CSS에서 animation-fill-mode 속성은 애니메이션이 재생 중이 아닐 때 요소에 적용할 스타일을 지정하는 데 사용됩니다. 기본적으로 CSS 애니메이션이 시작되기 전이나 끝난 후에는 원래 상태로 돌아가는데, 이 속성을 활용하면 애니메이션의 시작 전 또는 종료 후에도 특정 키프레임의 스타일을 유지하도록 만들 수 있습니다.
animation-fill-mode의 주요 값
- none — 기본값입니다. 애니메이션이 재생되지 않는 동안에는 어떤 스타일도 적용되지 않습니다.
- forwards — 애니메이션이 종료된 후 마지막 키프레임(to)의 스타일이 그대로 유지됩니다.
- backwards — 애니메이션이 시작되기 전(지연 시간 동안) 첫 번째 키프레임(from)의 스타일이 미리 적용됩니다.
- both — forwards와 backwards를 함께 적용한 것으로, 애니메이션 시작 전과 종료 후 모두 키프레임의 스타일이 유지됩니다.
animation-fill-mode 사용 예제
다음 예제 코드를 실행하여 animation-fill-mode 속성이 실제로 어떻게 동작하는지 확인해 볼 수 있습니다. 이 예제에서는 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>예제 코드 설명
- @keyframes myanim: 요소가 왼쪽 0px에서 200px까지 이동하면서 배경색이 초록색(green)에서 파란색(blue)으로 변하는 애니메이션을 정의합니다.
- animation-duration: 2s: 애니메이션이 2초 동안 진행되도록 설정합니다.
- animation-fill-mode: backwards: 애니메이션이 시작되기 전까지 첫 번째 키프레임의 스타일인 초록색 배경이 미리 적용됩니다.
마무리
animation-fill-mode 속성을 잘 활용하면 애니메이션의 시작과 끝에서 발생하는 어색한 스타일 전환을 방지하고, 더욱 자연스럽고 세련된 웹 애니메이션을 구현할 수 있습니다. 다양한 값을 직접 실험해 보며 각각의 차이점을 익혀보시기 바랍니다.