[CSS] animation이 끝난 시점의 속성값 유지하기

forwards 속성값

animation은 기본적으로 애니메이션이 끝나면 기존의 속성값으로 돌아간다.
애니메이션이 끝난 시점의 상태를 유지하고 싶다면 animation 속성의 forwards 속성값을 사용한다.

@keyframed hideSplash {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

#splash {
  animation: hideSplash 1s forwards;
}

forwards 속성값을 사용하면 애니메이션이 끝난 시점의 속성값을 유지할 수 있다.

위의 경우 opacity 속성의 속성값이 0으로 유지되어 애니메이션이 끝나면 보이지 않는 상태가 유지된다.