Bagaimana untuk Mencipta Animasi CSS Kiri-Kanan Lancar untuk Div ​​Dalam Bekasnya?

Animasi CSS Generik untuk Pergerakan Kiri-Kanan

Dalam artikel ini, kami akan meneroka mencipta animasi CSS generik untuk menggerakkan div ke kiri dan kanan, mencapai tepi bekasnya. Animasi ini boleh digunakan pada mana-mana div dengan kedudukan mutlak, tanpa mengira panjangnya yang tidak diketahui.

Isu: Menggunakan Kiri Terus Menyebabkan Kehilangan Sesaat

Pada mulanya, menggunakan kiri pada 0% dan 100% boleh menyebabkan div hilang seketika semasa bergerak. Ini kerana pada 100%, sifat kiri div melebihi lebar bekas, membawa kepada nilai negatif dan kedudukan di luar skrin.

Penyelesaian Lebih Bendalir: Mencampurkan Transformasi dan Kiri

Untuk menangani isu ini dan mencapai pergerakan yang lancar dan linear, kami memperkenalkan transformasi. Ini membolehkan kami mengalihkan div berbanding kedudukan semasanya, memastikan ia tidak melampaui batas bekas.

Berikut ialah versi terkini animasi menggunakan transformasi:

@keyframes destraSinistra {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
    transform: translateX(-100%);
  }
}

#div1 {
  /* ... */
  animation: destraSinistra 1s linear infinite alternate;
}

Dalam ini kod, bingkai utama pada 100% menggunakan kedua-dua kiri dan berubah. Kiri mengalihkan div ke tepi kanan, manakala transform seterusnya menterjemahkannya ke kiri untuk mengimbangi overshoot. Gabungan ini berkesan menghalang div daripada keluar dari skrin.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Animasi CSS Kiri-Kanan Lancar untuk Div ​​Dalam Bekasnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!