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

크기 조정 시 이미지 중심을 일정하게 유지하는 방법

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

이 순서를 준수하면 요소가 크기 조절 애니메이션 전체에서 정확하게 중앙에 위치하여 상위 요소를 기준으로 의도한 위치가 유지됩니다.

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