Maison > Article > interface Web > 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!