Mengapa Elemen Skala Saya Beralih ke Luar Pusat Semasa Animasi Web, dan Bagaimana Saya Boleh Membetulkannya?

Cara Mengekalkan Asal Imej semasa Animasi Skala

Dalam animasi web, apabila menskalakan elemen diletakkan secara mutlak dalam elemen lain, elemen berskala mungkin alih keluar pusat. Ini boleh diperhatikan dalam kes di mana segi empat sama merah, yang mewakili elemen berskala, bergerak menjauhi tengah (diwakili oleh segi empat sama biru) semasa animasi.

Punca Isu

Isu timbul kerana sifat transformasi animasi mengatasi transformasi terjemahan sebelumnya. Ini mengalih keluar terjemahan yang mengekalkan penjajaran elemen di tengah.

Penyelesaian

Untuk menyelesaikannya, kita perlu menggabungkan transformasi dalam sifat transformasi yang sama, memastikan betul tertib.

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

Penjelasan

Menggabungkan transformasi memastikan terjemahan dikekalkan sepanjang animasi, manakala transformasi skala digunakan di atasnya. Ini membolehkan elemen berskala tanpa beralih ke luar tengah. Sifat transform-origin tidak memainkan peranan dalam kes ini.

HTML yang dikemas kini:

<div>

Atas ialah kandungan terperinci Mengapa Elemen Skala Saya Beralih ke Luar Pusat Semasa Animasi Web, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!