Here are a few question-based titles that capture the essence of your article: Short and Direct: * How to Animate Smooth Horizontal Movement in CSS without Disappearing Elements? * CSS Animation: Ac

Left-Right Movement in CSS: A Generic Solution

This question seeks a CSS-only animation to move a div horizontally between the left and right edges of its container. The challenge with using simple left values is that the element disappears momentarily when moving from right to left.

To overcome this, the provided answer suggests leveraging transform combined with left or right. This eliminates the need for fixed values:

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

By applying this animation to the div with the following CSS:

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

The div moves horizontally between the edges of the container, maintaining its visibility throughout the animation. This solution is generic and can be applied to any div with absolute positioning, regardless of its width.

The above is the detailed content of Here are a few question-based titles that capture the essence of your article: Short and Direct: * How to Animate Smooth Horizontal Movement in CSS without Disappearing Elements? * CSS Animation: Ac. For more information, please follow other related articles on the PHP Chinese website!