如何在 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中文網其他相關文章！