Bagaimana untuk Memastikan Elemen Berpusat Semasa Animasi Skala CSS3?

Mengekalkan Asal Berpusat semasa Animasi Skala CSS3

Dalam animasi CSS3, penskalaan elemen kadangkala boleh menyebabkan ia menjadi di luar pusat jika transformasi -sifat asal tidak dikonfigurasikan dengan betul. Berikut ialah cara untuk menangani isu ini dan memastikan elemen kekal berpusat sepanjang animasi.

Kunci untuk mengekalkan asal berpusat adalah dengan memasukkan terjemahan asal (iaitu, titik tengah) dalam sifat transformasi animasi . Ini kerana penggunaan transformasi baharu mengatasi mana-mana perubahan sebelumnya. Dengan menambahkan terjemahan, kami mengekalkan kedudukan awal elemen.

Berikut ialah kod CSS yang dilaraskan:

@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 */
}

Dengan pelarasan ini, elemen akan mengekalkan kedudukan tengahnya semasa animasi penskalaan, memastikan bahawa asal (segi empat biru) kekal sejajar dengan tengah bekas lain (segi empat merah).

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