웹 애니메이션 중에 크기 조정된 요소가 중심에서 벗어나는 이유는 무엇이며 어떻게 해결할 수 있습니까?

스케일 애니메이션 중 이미지 원본을 유지하는 방법

웹 애니메이션에서 다른 요소 내에 절대적으로 위치하는 요소의 크기를 조정하면 크기가 조정된 요소가 중심에서 벗어나 이동합니다. 이는 애니메이션 도중 크기 조정된 요소를 나타내는 빨간색 사각형이 중심(파란색 사각형으로 표시)에서 멀어지는 경우에 관찰될 수 있습니다.

문제 원인

애니메이션의 변환 속성이 ​​이전 번역 변환을 재정의하기 때문에 문제가 발생합니다. 이렇게 하면 중앙에서 요소 정렬을 유지하는 변환이 제거됩니다.

해결 방법

이 문제를 해결하려면 동일한 변환 속성에서 변환을 결합하여 다음을 보장해야 합니다. 옳은 order.

@keyframes ripple_large {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  75% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

.to-animate {
  transform: translate(-50%, -50%);
}

설명

변형을 결합하면 애니메이션 전체에서 변환이 유지되는 동시에 그 위에 스케일 변환이 적용됩니다. 이를 통해 요소가 중심에서 벗어나지 않고 크기를 조정할 수 있습니다. 이 경우 변환 원본 속성은 역할을 하지 않습니다.

업데이트된 HTML:

<div></div>

위 내용은 웹 애니메이션 중에 크기 조정된 요소가 중심에서 벗어나는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!