為什麼我的縮放元素在 Web 動畫過程中會偏離中心，如何修復它？

如何在縮放動畫期間保持圖像原點

在網頁動畫中，當縮放絕對位於另一個元素內的元素時，縮放後的元素可能會偏離中心。如果在動畫過程中代表縮放元素的紅色方塊遠離中心（由藍色方塊代表），則可以觀察到這種情況。

問題原因

出現此問題是因為動畫的變換屬性覆蓋了先前的平移變換。這將刪除保持元素在中心對齊的平移。

解

要解決此問題，我們需要將變換組合在同一個變換屬性中，確保正確的

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

說明

組合變換可確保在整個動畫中保持平移，同時在其之上應用縮放變換。這使得元素可以在不偏離中心的情況下進行縮放。在這種情況下，transform-origin 屬性不起作用。

更新的 HTML：

<div></div>

以上是為什麼我的縮放元素在 Web 動畫過程中會偏離中心，如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！