Berikut ialah beberapa tajuk berasaskan soalan yang menangkap intipati artikel anda: Pendek dan Langsung: * Bagaimana untuk Menghidupkan Pergerakan Mendatar Lancar dalam CSS tanpa Elemen Menghilang? * Animasi CSS: Ac

Pergerakan Kiri-Kanan dalam CSS: Penyelesaian Generik

Soalan ini mencari animasi CSS sahaja untuk menggerakkan div secara mendatar antara kiri dan tepi kanan bekasnya. Cabaran menggunakan nilai kiri mudah ialah elemen itu hilang seketika apabila bergerak dari kanan ke kiri.

Untuk mengatasinya, jawapan yang disediakan mencadangkan memanfaatkan transformasi digabungkan dengan kiri atau kanan. Ini menghapuskan keperluan untuk nilai tetap:

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

Dengan menggunakan animasi ini pada div dengan CSS berikut:

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

Div bergerak secara mendatar antara tepi bekas, mengekalkan keterlihatannya sepanjang animasi. Penyelesaian ini adalah generik dan boleh digunakan pada mana-mana div dengan kedudukan mutlak, tanpa mengira lebarnya.

Atas ialah kandungan terperinci Berikut ialah beberapa tajuk berasaskan soalan yang menangkap intipati artikel anda: Pendek dan Langsung: * Bagaimana untuk Menghidupkan Pergerakan Mendatar Lancar dalam CSS tanpa Elemen Menghilang? * Animasi CSS: Ac. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!