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 ce problème, 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 :

@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;
}

Cette technique garantit que le DIV effectue une transition fluide entre les bords gauche et droit de son conteneur, offrant ainsi une solution polyvalente pour tout DIV avec un positionnement absolu.