여러개의 Animation을 동시에 적용하고 싶다면? getAnimations()

여러개의 애니메이션을 동시에 적용하고 싶을 땐 어떻게 하시나요?

div {
  animation:
    x 2000ms infinite alternate ease-in,
    y 2000ms infinite alternate ease-out;
}

@keyframes x {
  from { transform: translateX(0vw) }
  to { transform: translateX(90vw) }
}

@keyframes y {
  from { transform: translateY(0vh) }
  to { transform: translateY(90vh) }
}

이렇게 중첩하게되면 똑같은 2000ms 시간 내에 하나만 적용되어야 하므로 한 가지 애니메이션만 작동하게 됩니다.

하지만, 최신 브라우저에서 사용되는 Web Animations API를 사용하면 합성 옵션을 도입하여 이 애니메이션들을 혼합할 수 있습니다.

위의 애니메이션들을 Web Animations API를 사용하여 다음과 같이 다시 똑같이 정의할 수 있습니다.

element.animate({
  transform: ['translateX(0vw)','translateX(90vw)']
}, {
  duration: 2000,
  easing: 'ease-in',
  iterations: Infinity,
  direction: 'alternate'
});

element.animate({
  transform: ['translateY(0vh)','translateY(90vh)']
}, {
  duration: 2000,
  easing: 'ease-in',
  iterations: Infinity,
  direction: 'alternate'
});

그러나 복합 속성이라고 하는 새로운 옵션을 사용할 수 있습니다. 

기본값은 'REPLACE'입니다.

여기서 속성의 값은 함께 제공되고 동일한 속성을 수정하려고 시도하는 새로운 애니메이션으로 대체됩니다.

두 번째 애니메이션을 변경하여 'ADD' 옵션을 추가하면 해당 속성의 현재 상태가 무엇이든 이 애니메이션의 값을 추가하도록 합니다.

element.animate({
  transform: ['translateY(0vh)','translateY(90vh)']
}, {
  duration: 2000,
  easing: 'ease-in',
  iterations: Infinity,
  direction: 'alternate',
  composite: 'add'
});

See the Pen Transform with composite add by YoungMinKim (@oinochoe) on CodePen.

 

하지만 CSS에서 정의하고 사용할 수 있다면 더 좋겠지요?

Element API의 getAnimations() 메서드를 사용하면 요소에서 활성화된 모든 애니메이션, CSS 애니메이션 및 CSS Transition을 가져올 수 있습니다.

반환된 모든 애니메이션의 키프레임, 타이밍옵션 또는 복합 속성을 수정할 수 있다는 것입니다.

따라서 애니메이션(CSS 애니메이션도 포함)을 언제든지(실행 중일 때도) 업데이트할 수 있습니다.

 

See the Pen Additive CSS Animations by YoungMinKim (@oinochoe) on CodePen.

 

이것은 또한 animationstart 및 기타 이벤트와 함께 진행하여 적절한 시간에 속성을 업데이트하고 있는지 확인할 수 있습니다. 

event.animationName을 CSS 애니메이션의 getAnimations() 목록에 있는 animationName과 상호 참조하여 찾고 있는 애니메이션을 찾아 업데이트할 수 있습니다.

 

직접 예제를 연습삼아 바꿔가면서 테스트해보세요 : )

 

 

출처 : https://danielcwilson.com/blog/2020/10/additive-css-animations/