CSS - animation에서 delay를 포함해 반복시키기

CSS animation은 element에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 주는 기능이다.

animation은 animation을 나타내는 CSS 스타일과 animation의 중간 상태를 나타내느 키 프레임들로 이루어 진다.

 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations

CSS 애니메이션 사용하기 - CSS: Cascading Style Sheets | MDN

 

즉 animation 속성을 이용하기 위해서는 @keyframes을 통해서 animation이 작동되는 총 시간동안 %마다 구간을 설정하여 자연스럽게 적용되도록 할 수 있다. (0%와 100%를 from과 to로 사용할 수도 있다)

animation을 적용하면서 animation-delay를 통해서 element가 로드되고 나서 언제 애니메이션이 시작될지 지정할 수 있고, animation-iteration-count를 통해서 애니메이션이 몇 번 반복될지 지정할 수 있다.

하지만 내가 연구실 홈페이지에 star wars 오프닝과 같은 효과를 적용시킬때 생겼던 문제점은, animation-delay가 처음 iteration에서만 적용이 되고, 반복해서 적용될때에는 delay가 먹히지 않았다.

예를들어 세 애니메이션이 나타날 때, 두번째 애니메이션은 첫번째 애니메이션이 5초동안 진행된 후 5초의 delay시간을 가지고 10초간 지속된다. 그러면 세번째 애니메이션은 처음 5초와 두번째 애니메이션의 진행 시간 10초를 합친 15초후 15초의 delay를 가지고 30초간 지속이 된다. (예를 들어서)

이 과정을 계속 반복한다고 할때, 총 지속시간 (5초, 10초, 30초) 45s 후 처음 애니메이션이 다시 나타나야 하는데, delay 시간 설정은 처음 iteration 돌때만 적용 되므로, 두번째 iteration을 돌기 전 delay 시간을 설정할 수 없었다.

이를 해결하는 방법은 약간의 trick을 사용하는 것인데, 

세 개의 애니메이션 모두 재생시간을 45초로 해두고, 처음 delay 시간만 맞춰 놓고, @keyframes 설정 시 %계산의 비율을 45초의 총 길이로 설정하여 나머지 재생되지 않아야 하는 시점에서는 opacity를 0으로 주어 숨김처리를  해 주는 것이였다.

animation-duration을 전체 시간으로 설정 하고, keyframe의 비율을 바꿔줌으로서 이 문제를 해결할 수 있다.