Comment obtenir un mouvement gauche-droite fluide pour des divs absolument positionnés en CSS ?

Mouvement gauche-droite en CSS : une solution générique

Dans le domaine de la conception Web, la capacité d'animer des éléments avec fluidité est cruciale . Cependant, lorsqu'il s'agit du mouvement gauche-droite de divs en position absolue, un défi courant se pose : l'élément disparaît un instant avant de réapparaître. Ce problème provient souvent de transitions d'animation incorrectes.

Pour résoudre ce problème, il est essentiel d'éviter d'utiliser des valeurs fixes pour la gauche ou la droite. Pensez plutôt à utiliser la propriété transform en conjonction avec left ou right. Cette technique empêchera toute disparition brusque pendant l'animation.

Voici un extrait CSS mis à jour qui résout le problème de disparition :

<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>

Dans ce code mis à jour, nous utilisons translateX(-100%) dans la propriété transform pour décaler l'élément de 100% vers la gauche, évitant ainsi toute disparition visible. Cela garantit un mouvement gauche-droite fluide et linéaire sans aucune interruption.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!