Voici quelques titres basés sur des questions qui capturent l’essence de votre article : Court et direct : * Comment animer un mouvement horizontal fluide en CSS sans faire disparaître des éléments ? * Animation CSS : Ac

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

Cette question recherche une animation CSS uniquement pour déplacer un div horizontalement entre la gauche et les bords droits de son conteneur. Le défi lié à l'utilisation de valeurs de gauche simples est que l'élément disparaît momentanément lors du déplacement de droite à gauche.

Pour surmonter ce problème, la réponse fournie suggère d'exploiter la transformation combinée avec la gauche ou la droite. Cela élimine le besoin de valeurs fixes :

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

En appliquant cette animation au div avec le CSS suivant :

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

Le div se déplace horizontalement entre les bords du conteneur, en conservant sa visibilité tout au long de l'animation. Cette solution est générique et peut être appliquée à n'importe quel div à positionnement absolu, quelle que soit sa largeur.

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!