Bagaimana untuk Memastikan Imej Berpusat Semasa Animasi Penskalaan CSS?

Cara Mengekalkan Pusat Imej Malar Semasa Menskala

Apabila menskala elemen menggunakan animasi CSS, mengekalkan kedudukan berpusat adalah penting. Walau bagaimanapun, dalam senario tertentu, elemen berskala mungkin beralih ke luar tengah, seperti yang digambarkan dalam biola yang disediakan.

Isu asas timbul daripada animasi yang mengatasi transformasi terjemahan asal. Apabila menentukan transformasi baharu dalam animasi, ia mengatasi kedudukan awal, mengalih keluar terjemahan yang diperlukan untuk penjajaran tengah.

Untuk membetulkannya, adalah penting untuk menggabungkan kedua-dua transformasi dalam sifat yang sama, memastikan susunan yang betul: permulaan terjemahan diikuti dengan animasi penskalaan. Coretan kod yang dikemas kini di bawah menunjukkan pendekatan ini:

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

Dengan mematuhi perintah ini, elemen kekal tepat di tengah-tengah sepanjang animasi skala, mengekalkan kedudukan yang dimaksudkan berbanding dengan elemen induknya.

Atas ialah kandungan terperinci Bagaimana untuk Memastikan Imej Berpusat Semasa Animasi Penskalaan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!