Animation CSS générique pour le mouvement gauche-droit

Dans cet article, nous explorerons la création d'une animation CSS générique pour déplacer une div à gauche et à droite, atteignant les bords de son conteneur. Cette animation peut être appliquée à n'importe quel div avec positionnement absolu, quelle que soit sa longueur inconnue.

Le problème: l'utilisation de gauche provoque directement une disparition momentanée

, en utilisant la gauche à 0% et 100% peut provoquer la disparition momentanée du div. En effet, à 100%, la propriété gauche de la div dépasse la largeur du conteneur, conduisant à une valeur négative et à une position hors de l'écran. Cela nous permet de déplacer la div relative à sa position actuelle, garantissant qu'il ne dépasse pas les limites du conteneur.

Voici une version mise à jour de l'animation à l'aide 0% { à gauche: 0; } 100% { Gauche: 100%; Transform: Translatex (-100%); } } # div1 { / * ... * / Animation: destrasinistra 1s linéaire infinie alternative; } Dans ce code, l'image clé à 100% utilise à la fois la gauche et la transformation. La gauche déplace le div au bord droit, tandis que Transforme le traduit davantage vers la gauche pour compenser le dépassement. Cette combinaison empêche efficacement le div de sortir hors écran.