animation 반복과 반복 사이 delay

animation이 1초 동안 진행이 되지만 반복되기 전 4초 정도의 딜레이를 주고 싶다고 가정해보자.

말로는 쉽지만 하려고 하니까 참 생각처럼 되지 않았다.

 

animation-delay라는 속성이 있지만 이 속성은 animation이 처음 시작하기 전 딜레이를 주는 속성으로 내가 원하는 효과에는 도움이 되지 않았다.

 

Solution.

animation: shinig 5s infinite;

animtion의 during 시간을 5초로 설정한 후 keyframe에서 4초동안 아무 움직임이 없도록 하는 편법을 사용했다.

@keyframes shinig {
  0% {
	// 아무 움직임 없음.
  }
  80% {
	// 내가 원하는 값을 입력
  }
  100% {
	// 내가 원하는 값을 입력
  }
}

내가 너무 허술하게 설명하는건가... 음...

5초를 100%로 생각했을 때 4초에서부터 1초 동안 애니메이션이 움직이도록 0초(0%)부터 4초(80%)까지 움직임이 없고 4초(80%)부터 5초(100%)동안 애니메이션이 동작하도록 하는 방법이었다.

 

방법을 찾고보니 고민했던 시간보다 너무 간단한 방법이어서 좀 허무하긴 하지만 그래도 뭐 해결~~!!!

 

참고.

https://css-tricks.com/css-keyframe-animation-delay-iterations/