바꾸기, 추가 또는 누적 이것이 문제가 되었습니다.
여러 애니메이션 효과 결합
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가 적용된 회색 상자가 세 개 있습니다.
이러한 상자에는 동일한 애니메이션이 있지만 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만큼 이동한 다음 45deg로 돌린 다음 100px로 이동합니다.
세 번째 상자는 animation-composition: accumulate로 설정됩니다. 종료 위치에서 translateX(100px)이 수학적으로 원래 변환의 translateX(50px)에 추가되어 translateX(150px) rotate(45deg)가 변환됩니다.