CSS3 스케일 애니메이션 중에 요소를 중앙에 유지하는 방법은 무엇입니까?

CSS3 스케일 애니메이션 중 원점 중심 유지

CSS3 애니메이션에서 요소의 크기를 조정하면 변형이 발생하는 경우 요소가 중심에서 벗어날 수 있습니다. -origin 속성이 올바르게 구성되지 않았습니다. 이 문제를 해결하고 요소가 애니메이션 전체에서 중앙에 유지되도록 하는 방법은 다음과 같습니다.

중심 원점을 유지하는 핵심은 애니메이션의 변환 속성 내에 원래 번역(즉, 중심점)을 포함하는 것입니다. . 이는 새 변환을 적용하면 이전 변환이 재정의되기 때문입니다. 번역을 추가함으로써 요소의 초기 위치를 유지합니다.

조정된 CSS 코드는 다음과 같습니다.

@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%); /* Maintains the original position */
}

이 조정을 통해 요소는 크기 조정 애니메이션 중에 중앙 위치를 유지하므로 원점(파란색 사각형)이 다른 컨테이너(빨간색 사각형)의 중심과 정렬된 상태로 유지됩니다.

위 내용은 CSS3 스케일 애니메이션 중에 요소를 중앙에 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!