TIL 06 | animation-delay, keyframe 활용

animation-delay

두 가지 방법으로 적을 수 있다.

1. animation 안에 한 번에 적기
animation: 이름 지속시간 딜레이시간 function;

2. animation 따로, delay 따로 적기 (반복되는 animation 속성을 따로 묶을 수 있음)
animation-delay: 시간;

예시 1.

로드 후 애니메이션이 작동되기까지의 딜레이를 적용할 수 있다.

animation: name 1.1s 0.1s ease infinite;
-> 새로고침 후 애니메이션 작동까지 딜레이 0.1s 발생

예시 2.

animation을 요소마다 시간차를 두고 적용하고 싶을 때 animation-delay를 활용할 수 있다.

.div:nth-child(1) {
  animation-delay: 0.1s;
}
.div:nth-child(2) {
  animation-delay: 0.2s;
}
.div:nth-child(3) {
  animation-delay: 0.3s;
}
.div:nth-child(4) {
  animation-delay: 0.4s;
}
.div:nth-child(5) {
  animation-delay: 0.5s;
}

-> 5개의 div가 시작 시점이 다르기 때문에 계속해서 애니메이션이 0.1s 간격으로 순차적으로 발동됨.

Keyframe

그런데 infinite로 적용되는 애니메이션에서, 한 사이클이 끝났을 때 다음 사이클 사이에는 delay가 적용되지 않았다. 그러니까 내가 원했던 것은 한 사이클이 끝나고 다음 사이클이 시작되기까지 초기상태로 1초 정도 기다렸다 시작하는거였음. 아마도 animation-delay는 맨 처음 한 번만 적용되기 때문에 원하는대로 안된듯. 이에 구글링으로 찾아본 방법은 2가지가 있었고 나는 keyframe을 활용하는 방법을 택했다.

1. timing-function을 조정하기
   나는 ease를 사용하고 있었는데, ease보다 한 사이클이 끝나는 부분이 길게 지속되도록 커스터마이징으로 그래프를 조정하여 사용할 수 있다.
   그래프 커스터마이징 해볼 수 있는 사이트

2. keyframe에서 한 사이클이 끝나는 단계를 늘리기
   원래는 0%에서 초기값, 100%에서 변화된 상태를 넣고 끝났다면 한 단계를 더 추가하여 50%와 100% 두 단계에서 변화된 상태를 넣으면 좀 더 지속이 오래 됐다. 말로 설명하니까 이상한데... 다음 사이클이 시작되기까지의 시간이 벌린다는 말임!

   @keyframes 이름 {
     0% {
     }
     50% {
       transform: 썸띵(값);
     }
     100% {
       transform: 썸띵(값);
     }
   }