ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 여러개의 Animation을 동시에 적용하고 싶다면? getAnimations()
    CSS 2022. 4. 5. 01:54

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

    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/

Designed by Tistory.