Bagaimana untuk Mencapai Animasi Licin Kiri-Kanan Elemen DIV Tanpa Berkelip?

Pergerakan Kiri-Kanan dalam CSS: Penyelesaian Universal

Ramai pembangun web menghadapi cabaran untuk menghidupkan elemen DIV di sepanjang paksi mendatar, terikat dengan tepi bekas mereka. Tugasan ini memberikan kerumitan, kerana nilai tetap boleh menyebabkan elemen hilang seketika.

Untuk menangani isu ini, animasi CSS generik boleh digunakan untuk menggerakkan DIV dari kiri ke kanan dengan lancar. Walau bagaimanapun, menggunakan sifat kiri pada 0% dan 100% boleh menyebabkan kelipan disebabkan elemen keluar sepenuhnya dari skrin.

Untuk mengatasinya, gabungan sifat transformasi dan kiri atau kanan disyorkan. Kaedah ini mengekalkan elemen pada skrin sambil menyediakan pergerakan yang diingini.

Sebagai contoh, kod CSS berikut mencapai kesan ini:

<code class="css">@keyframes destraSinistra {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
    transform: translateX(-100%);
  }
}

#div1 {
  position: absolute;
  border: solid 1px lightgray;
  width: 100px;
  height: 30px;
  background-color: lightgreen;
  animation: destraSinistra 1s linear infinite alternate;
}</code>

Teknik ini memastikan bahawa DIV beralih dengan lancar antara tepi kiri dan kanan bekasnya, menyediakan penyelesaian serba boleh untuk mana-mana DIV dengan kedudukan mutlak.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Animasi Licin Kiri-Kanan Elemen DIV Tanpa Berkelip?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!