키프레임 에니메이션을 지연시키는 새로운 방법

CSS @keyframes 애니메이션의 각 반복 사이에 일시 중지를 추가하고 싶었다면 CSS에서 이를 수행하는 기본 제공 방법이 없다는 사실에 실망했을 것입니다.

 

물론 애니메이션 지연을 사용하여 @keyframe 집합의 시작을 지연할 수 있지만 키 프레임을 통한 첫 번째 반복과 각 후속 실행 사이에 시간을 추가할 방법은 없습니다.

 

기본적인 방법은 다음과 같습니다.

/* scss */
@for $i from 1 through 20 {
  &:nth-child(#{$i}) {
    $delay: random(9999) + 0ms;
    top: calc(50% - #{random(400) - 200px});
    left: calc(50% - #{random(300) + 0px});
    animation-delay: $delay;

    &::before,
    &::after {
    animation-delay: $delay;
  }
}

@keyframes shooting {
  0% {
    transform: translateX(0);
  }
  
  50%, 100% {
    transform: translateX(300px);
  }
}

이 접근 방식에는 반복 사이의 지연 시간을 파악한 다음 키 프레임을 100%의 일부로 압축하는 것이 포함됩니다.

그런 다음 일시 중지를 달성하기 위해 100%에 도달할 때까지 애니메이션의 최종 상태를 유지합니다.

 

@keyframes my-animation {
  /* Animation happens between 0% and 50% */
  0% {
    width: 0;
  }
  15% {
    width: 100px;
  }
  /* Animation is paused/delayed between 50% and 100% */
  50%, 100% {
    width: 0;
  }
}

이 접근방식의 가장 큰 단점을 경험했습니다.

각 키 프레임을 수동으로 조정해야하는데 약간의 고통이 있고 오류가 발생하기 쉽습니다.

또한 모든 키 프레임을 100% 백업까지 옮겨야 하는경우 애니메이션이 수행하는 작업을 이해하기가 더 어렵습니다.

 

새로운 기술 : 지연 시간 동안 숨기기

또 다른 기술은 지연시간 동안 애니메이션을 숨기는 역할을하는 새로운 @keyframe 세트를 만드는 것입니다.

그런 다음 원본 애니메이션과 동시에 적용하십시오.

.target-of-animation {
  animation: my-awesome-beboop 1s, pause-between-iterations 4s;
}

@keyframes my-awesome-beboop {
  ...
}

@keyframes pause-between-iterations {
  /* 위의 애니메이션은 25%동안 보여집니다. */
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  /* 위의 애니메이션은 나머지 75%동안은 가려집니다. */
  25.1% {
    opacity: 0;	
  }
  100% {
    opacity: 0;
  }
}

 

이 기술의 한계는 애니메이션 사이의 일시중지가 "일시중지된" 키프레임의 정수 배수여야한다는 것입니다.

동일한 요소에 더 오래 실행되는 키프레임이 적용 되더라도 무한 반복되는 키프레임은 즉시 다시 실행되기 때문입니다.

@keyframes shooting {
  0% {
    transform: translateX(0);
  }
  
  100% {
    transform: translateX(300px);
  }
}

@keyframes pause-animation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  50.1% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

이와 같이 적용해볼 수 있겠습니다.

 

만약 그렇다면 딜레이 시간동안 숨기고 싶지 않다면 어떨까요?

translateX를 사용하는 경우는 다음과 같이 사용할 수 있습니다.

@keyframes slide-right {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

/* pausing the animation for three iterations */
@keyframes slide-left-pause {
  25%, 50%, 75% {
    left: 0;
  }
  37.5%, 62.5%, 87.5% {
    left: -100px;
  }
  100% {
    left: 0;
  }
}

일시 중지 중에 약간의 흔들림이 발생할 수 있습니다. 

위의 translateX 예제에서 애니메이션이 우위를 차지하기 위해 서로 충돌이 있기 때문에  일시 중지중에 공에 약간의 진동이 있습니다.

결론적으로 가장 좋은 방법은 지연시간 동안 숨기는 것입니다.

 

더 좋은 방법이 있다면 댓글로 부탁드립니다!

 

 

 

 

출처 : css-tricks.com/a-new-way-to-delay-keyframes-animations/