CSS 애니메이션 순서대로 실행하기

CSS는 하다보면 자연스럽게 익숙해지는 언어인 것 같다. 외우려 하면 금방 까먹는데, 필요할 때마다 만들다 보면 조금씩 익숙해지고 JS로 구현하는 것보다 훨씬 편하다.

 

CSS는 생각보다 많은 기능들을 지원하고 점점 모던하게 바뀌려고 노력하는 것 같다. CSS로 구현이 가능하다면 CSS로 구현하는 것이 성능면에서나(상황에 따라 큰 차이는 없겠지만), 효율면에서 좋은 것 같다.

Animation Delay + Animation Fill Mode

처음엔 이 속성이 있는 줄도 몰라서 애니메이션이 처음 상태로 돌아가는 것 때문에 JS로 구현하려고 했었다.

 

animation-delay와 animation-fill-mode: forwards의 조합으로 순서대로 실행시킨 후 상태를 유지할 수 있다. forwards 속성은 실행 된 애니메이션의 마지막 keyframe에 의해 계산된 값을 유지한다.

 

참고

MDN - animation fill mode