如何在 CSS3 縮放動畫期間保持元素居中？

在CSS3 縮放動畫期間保持居中原點

在CSS3 動畫中，縮放元素有時會導致元素偏離中心（如果變換） - origin 屬性配置不正確。以下是解決此問題並確保元素在整個動畫中保持居中的方法。

保留居中原點的關鍵是將原始翻譯（即中心點）包含在動畫的變換屬性中。這是因為應用新的變換會覆蓋先前的任何變換。透過新增翻譯，我們保持了元素的初始位置。

以下是調整後的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;
  }
}

.to-animate {
  transform: translate(-50%, -50%); /* Maintains the original position */
}

透過此調整，元素將在縮放動畫期間保持居中位置，確保原點（藍色方塊）與另一個容器（紅色方塊）的中心保持對齊。

以上是如何在 CSS3 縮放動畫期間保持元素居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！