如何在縮放動畫期間保持圖像原點
在網頁動畫中,當縮放絕對位於另一個元素內的元素時,縮放後的元素可能會偏離中心。如果在動畫過程中代表縮放元素的紅色方塊遠離中心(由藍色方塊代表),則可以觀察到這種情況。
問題原因
出現此問題是因為動畫的變換屬性覆蓋了先前的平移變換。這將刪除保持元素在中心對齊的平移。
解
要解決此問題,我們需要將變換組合在同一個變換屬性中,確保正確的
@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>
以上是為什麼我的縮放元素在 Web 動畫過程中會偏離中心,如何修復它?的詳細內容。更多資訊請關注PHP中文網其他相關文章!