CSS를 사용하는 애니메이션이 가능합니다. 이때 animation 프로퍼티를 사용할 수 있는데 계속해서 반복하는 것이 아니라 만약 마지막에 해닫하는 상태를 계속 유지하려면 어떻게 하는지 알아봅니다.




# CSS animation 마지막 상태 유지하기기본값으로 css의 animation은 같은 동작을 계속 반복합니다. 하지만 설정에 따라 마지막 상태를 유지할 수 있는데 이때 사용하는 설정으로 animation-fill-mode를 사용할 수 있습니다.

animation-fill-mode: forwards;

animation-fill-mode에 이처럼 forwards를 적용하면 마지막에 사용된 css의 상태가 유지되게됩니다. 그렇다면 간단한 예제를 하나 만들어보겠습니다.


! CSS animation 예제보기 아래의 예제는 body에 적용하여 전체 웹페이지가 서서히 나타나는 이벤트를 구현한 코드입니다. 처음에 css를 opacity: 0을 주고 애니메이션이 시작되면 서서히 opacity: 1이 되면서 나타나게 되죠.
body {
    opacity: 0;
    animation: fadeIn 1.5s forwards;
}

여기서 animation은 한번에 에니메이션을 구현하는 css 통합 속성입니다. 각각 나누어 animation-fill-mode를 사용할 수도 있겠지만 예제에서는 한번에 사용하였습니다.

애니메이션으로 만들어진 fadeIn은 임의로 만든 변수로 아래처럼 작성합니다.
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

이제 페이지가 로딩되면 body 전체가 안보이지만 animation이 적용되면서 서서히 드러나게됩니다. 그리고 반복되는 것이 아닌 한번만 적용되고 마지막 상태인 opacity: 1을 유지하게됩니다.