CSS3 크기 조정 애니메이션 중에 이미지를 중앙에 유지하는 방법은 무엇입니까?

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

제공하신 바이올린에 표시된 것과 같은 상황에서 CSS3 애니메이션이 중앙에 있는 다른 요소의 절대 위치에서 요소의 크기를 조정하면 애니메이션 중에 요소가 잘못 정렬될 수 있습니다. 특히 바이올린의 빨간색 사각형에서 알 수 있듯이 중심에서 벗어난 것처럼 보일 수 있습니다.

이 문제를 해결하려면 변환 원본 속성을 수정하면 됩니다. 문제는 새 변환(애니메이션 내)이 원래 변환을 재정의할 때 발생합니다. 이 경우 원래 변환은 요소의 중앙 정렬을 유지하는 역할을 합니다.

이 문제를 피하려면 동일한 변환 속성 내에서 변환을 결합하여 올바른 순서를 보장해야 합니다. 다음 코드는 수정된 접근 방식을 보여줍니다.

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

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