Comment obtenir une animation fluide gauche-droite des éléments DIV sans scintillement ?

Mouvement gauche-droite en CSS : une solution universelle

De nombreux développeurs Web sont confrontés au défi d'animer des éléments DIV le long d'un axe horizontal, lié par les bords de leur contenant. Cette tâche présente des complexités, car des valeurs fixes peuvent entraîner la disparition momentanée de l'élément.

Pour résoudre ce problème, une animation CSS générique peut être utilisée pour déplacer de manière transparente le DIV de gauche à droite. Cependant, l'utilisation des propriétés de gauche à 0 % et 100 % peut provoquer un scintillement dû à l'élément sortant complètement de l'écran.

Pour surmonter cela, une combinaison de propriétés de transformation et de gauche ou de droite est recommandée. Cette méthode maintient l'élément à l'écran tout en fournissant le mouvement souhaité.

Par exemple, le code CSS suivant obtient cet effet :

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

Cette technique garantit que le DIV passe en douceur entre le bords gauche et droit de son conteneur, offrant une solution polyvalente pour tout DIV avec positionnement absolu.

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!