웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > css

CSS animation 구현시 마지막 상태 유지하는 방법

Last Modified : 2020-10-19 / Created : 2018-09-19
38,818
View Count

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




# CSS animation 마지막 상태 유지하기

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

animation-fill-mode: forwards;

이와같이 animation-fill-mode에 이처럼 forwards를 적용하면 마지막에 사용된 css의 상태가 유지되게됩니다.

forwards를 사용할 경우 마지막 프레임이 계속 나타나 유지됩니다. 아래와 같이 다른 옵션값들도 존재합니다.

  • none // 기본값
  • forwards // 마지막 프레임 유지
  • backwards // 처음에 적용된 스타일 값으로 유지
  • both // forwards와 backwards를 모두 유지

그렇다면 간단한 예제를 하나 만들어보겠습니다.


! 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을 유지하게됩니다.


! 만약 정상 작동하지 않는 경우?


만약에 의도한대로 마지막 시점에 멈추지 않는다면? 이 경우 아래와 같이 두 가지 스타일 속성이 모두 사용되지 않았는지 확인해봐야 합니다.
body {
  animation-fill-mode: 
  animation: fadeIn 1.5s;
}

즉 앞에서 animation-fill-mode를 선언 한 경우라도 뒤에 animation 속성을 사용하면 처음 선언한 스타일이 적용되지 않아 발생하는 원인일 수 있으니 꼭 주의가 필요합니다.

Previous

[CSS] 웹사이트에 Print 프린트, 인쇄 버튼 만들기

Previous

CSS 텍스트 선택 드래그 설정, user-select 프로퍼티