animation-fill-mode 속성은 대부분 애니메이션이 종료된 후에 상태 유지를 목적으로 사용하기 때문에 forwards 속성값을 가장 많이 사용합니다. 6.7.3 animation-duration에서 사용한 예제 코드에 다음과 같이 animation-fill-mode 속성을 추가하면 애니메이션 종료 후에도 종료 시점의 상태를 유지하게 합니다.

div{
  width:100px;
  height:100px;
  background-color:red;
  animation-name:bgchange;
  animation-duration:5s;
  animation-fill-mode:forwards;
}

그림 6-76 실행결과

애니메이션이 종료되어도 요소의 배경색이 초기 상태인 빨간색으로 돌아가지 않고 종료 시점의 상태인 초록색이 유지됩니다.