TIL.1 animation delay

CSS animation 이 동작하는 중간에 delay 하는 나만의 방법.
animation 을 infinite 로 설정했을때,
한 동작이 끝나고 다시 같은 동작이 시작하기 전 조금의 텀을 주고 싶을때.

1. 예시

CSS

@keyframes roundRotation {
  0% {
    transform: rotateZ(0deg);
  }
  25% {
    transform: rotateZ(180deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  75% {
    transform: rotateZ(360deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
#rounds {
 animation: roundRotation 2s ease-in-out infinite;
}

rounds 라는 id를 가진 tag가 roundRotation이라는 애니매이션을 2초마다 무한정 반복하고 있다.
의도는 하나의 애니매이션이 끝나고 텀을 좀 주다가 다시 애니매이션이 시작되길 바랬고,
아예 애니매이션안에 같은 동작을 연속하여 적어주고 멈춰보이게 하는 효과를 주었다.

개인적으로 animation delay 라고 검색하면서 애니매이션이 '처음' 시작될때만 딜레이되는 원하지 않는 정보를 너무 많이 보다가 TIL에 적기로 했다.