Bagaimana untuk Memastikan Elemen Kedudukan Benar-benar Berpusat Semasa Animasi Skala CSS3?

Cara Mengekalkan Asal Pusat Semasa Animasi Skala

Apabila menggunakan animasi CSS3 untuk menskalakan elemen yang diletakkan secara mutlak di tengah-tengah elemen lain, animasi yang terhasil mungkin kelihatan di luar tengah. Percanggahan ini timbul kerana animasi mengatasi terjemahan awal yang memusatkan elemen.

Untuk menyelesaikan isu ini dan memastikan asal kekal tertumpu semasa animasi skala, adalah penting untuk:

1. Gabungkan transformasi: Daripada mengatasi terjemahan awal, gabungkan dengan transformasi skala dalam animasi. Ini membolehkan elemen kekal berpusat sambil turut berskala.
2. Nyatakan susunan dengan betul: Perhatikan susunan transformasi. Terjemahan mesti mendahului transformasi skala untuk mengekalkan penjajaran yang diingini.

Contoh Kemas Kini:

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

.center-point {
  transform: translate(-50%, -50%) scale(0);
}

Dengan pengubahsuaian ini, animasi penskalaan akan mengekalkan dengan betul kedudukan tengah elemen dalam bekas induk.

Atas ialah kandungan terperinci Bagaimana untuk Memastikan Elemen Kedudukan Benar-benar Berpusat Semasa Animasi Skala CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!