CSS animation (애니메이션) 마지막 상태 유지하는 방법
CSS 애니메이션은 기본값이 반복 입니다. 무한 반복이죠. 하지만 애니메이션을 무한 루트가 아닌 딱 1회만 진행되도록 만들고 싶습니다. 혹시 스크립트를 써야 하는게 아닐까 속으로 내심 걱정이었는데 역시 CSS에도 이런 기능이 있었습니다. 참고로 마우스를 올렸을 때 애니메이션은 기본적으로 1회만 재생됩니다. 그밖의 스타일에 애니메이션을 마지막 상태로 만들고 싶을 때 이 방법을 사용하면 됩니다. animatiln-fill-mode 이 방법으로 에니메이션의 동작을 제어할 수 있습니다. 브라켓에서 살펴보니 다음의 네가지에 대한 옵션이 있었습니다. backwards : 애니메이션 처음 상태의 CSS 스타일을 유지함 forwards : 애니메이션 마지막 상태의 CSS 스타일을 유지함 (바로 원하던 것!) both ..