animation-composition으로 여러 애니메이션 효과 결합

Bramus

animation-composition 속성을 사용하면 여러 애니메이션이 동일한 속성에 동시에 영향을 미칠 때 발생하는 상황을 제어할 수 있습니다.

요소에 다음과 같은 기본 변환이 적용되어 있다고 가정해 보겠습니다.

transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);

다음과 같은 키프레임 세트도 있다고 가정해 보겠습니다.

@keyframes adjust {
  to {
    transform: translateX(100px);
  }
}

이러한 키프레임을 요소에 적용하면 to 키프레임의 transform가 기존 transform를 대체합니다. 이것이 기본 동작입니다.

이제 animation-composition를 사용하면 기본 replace 대신 어떤 일이 발생해야 하는지 제어할 수 있습니다. 허용되는 값은 다음과 같습니다.

• replace: 효과 값이 기본 값을 대체합니다. (기본값)
• add: 효과 값이 기본 값에 추가됩니다.
• accumulate: 효과 값이 기본 값과 결합됩니다.

추가와 누적의 차이는 미묘합니다. 예를 들어 blur(2) 및 blur(3) 두 값을 사용합니다. 함께 추가하면 blur(2) blur(3)가 되지만 누적하면 blur(5)가 됩니다.

이것을 차로 가득 찬 컵에 비유할 수 있습니다. 우유를 부으면 다음과 같은 일이 발생합니다.

• replace: 차가 제거되고 우유로 대체됩니다.
• add: 우유가 컵에 추가되지만 차 위에 층을 이룬 상태로 남아 있습니다.
• accumulate: 우유를 차에 넣으면 둘 다 액체이므로 잘 섞입니다.

데모

데모에는 기본 transform 및 animation이 적용된 회색 상자가 3개 있습니다.

이러한 상자는 애니메이션이 동일하지만 animation-composition 설정이 다르기 때문에 결과가 다릅니다.

첫 번째 상자는 animation-composition: replace로 설정됩니다. 기본 동작입니다. 최종 위치에서 transform의 원래 translateX(50px) rotate(45deg) 값은 translateX(100px)로 대체됩니다.

두 번째 상자는 animation-composition: add로 설정됩니다. 최종 위치에서 translateX(100px)가 원래 translateX(50px) rotate(45deg)에 추가되어 translateX(50px) rotate(45deg) translateX(100px)가 됩니다. 이렇게 하면 상자가 50px 이동한 후 45도 회전하고 100px 이동합니다.

세 번째 상자는 animation-composition: accumulate로 설정됩니다. 최종 위치에서 translateX(100px)는 원래 변환의 translateX(50px)에 수학적으로 추가되어 translateX(150px) rotate(45deg)의 변환이 됩니다.