CSS. 애니메이션을 활성화한 이후에도 유지하고 싶다면??

 클릭하면 0%에서 100%까지 채워지는 바를 하나 만들었는데요,

문제는 클릭을 떼고 나면 채워졌던 것이 날아가 버린다는 것이었습니다.

이렇게요.

저는 클릭을 뗀 이후에도 애니메이션이 유지되길 원해서 방법을 찾아봤는데, 생각보다 간단했습니다. animation-play-state 를 사용하면 됩니다

이게 해당 부분의 html입니다

밑에는 수정하기 이전의 CSS입니다.

CSS초짜인 저는 forwards를 설정하면 마지막 키프레임이 유지되니까 forwards만 걸어두면 되겠지! 라고 생각했는데, 보시다시피 forwards는 클릭시에만 유지되는 속성이고 클릭을 떼면 애니메이션 자체가 날아가게 됩니다. 클릭 이후에도 애니메이션이 구동되게 할 필요가 있었습니다.

문제해결을 위해, stack이란 animation을 span 자체에 넣어주고 실행을 멈춰둔 뒤, graph클래스가 active 될 때에 애니메이션을 실행시키면 됩니다. 이를 위해 animation-play-state에 paused를 걸어두었다가, :active(클릭) 시 running이 되도록 설정하면 됩니다. 

변경한 CSS는 다음과 같습니다 

이제 애니메이션이 span자체에 들어가 있기에 클릭을 떼도 애니메이션이 사라지지 않습니다.