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

확대 애니메이션 중 중심 원점을 유지하는 방법

CSS3 애니메이션을 사용하여 다른 요소의 절대 중앙에 위치한 요소의 크기를 조정할 때 결과 애니메이션이 중심에서 벗어나 나타날 수 있습니다. 이러한 불일치는 애니메이션이 요소를 중앙에 배치하는 초기 변환을 재정의하기 때문에 발생합니다.

이 문제를 해결하고 크기 조절 애니메이션 중에 원점이 중앙에 유지되도록 하려면 다음을 수행하는 것이 중요합니다.

1. 변환 결합: 초기 번역을 재정의하는 대신 애니메이션 내에서 크기 변환과 결합합니다. 이렇게 하면 요소를 중앙에 유지하면서 크기를 조정할 수 있습니다.
2. 순서를 올바르게 지정하세요. 변환 순서에 주의하세요. 원하는 정렬을 유지하려면 크기 조정 변환보다 먼저 변환해야 합니다.

업데이트된 예:

@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;
  }
}

.center-point {
  transform: translate(-50%, -50%) scale(0);
}

이러한 수정을 통해 크기 조정 애니메이션이 올바르게 유지됩니다. 상위 컨테이너 내 요소의 중앙 위치입니다.

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