Problème d'animation CSS

texte de droite à gauche

a marqué ce sujet comme résolu.

Bonjour, Je suis actuellement sur l’animation d’un titre : défilement de droite à gauche, mais voilà, le titre s’arrête à left:0 plutôt que de continuer à défiler, puis l’animation recommence. Comment faire pour que le titre continue à glisser sur la gauche ?

Ci-dessous mes CSS :

#conteneur{
  position:relative;
 margin-top:-5vw;left:0;
  width:100%;
  min-height: 0;
}
 
.text
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
  font-size: 100vh;
min-height:100vh;
right: 0px;
color: red;
position: absolute;
  -webkit-animation: anim 800ms infinite normal ease-out forwards;
  animation: anim 800ms infinite normal ease-out forwards;
}
 
@-webkit-keyframes anim{
0% {width: 0px;}
100% {width: 250px;}
}
 
@keyframes anim{
0% {width: 0px;}
100% {width: 100%}
}

Merci et bon week-end, Paul-Loup

C’est pourtant bien comme ça que ça fonctionne, il faut par contre bien gérer la taille de tes éléments pour les positionner comme il faut.

Un exemple basique : https://codepen.io/viki53/pen/GRdeQrp

Si tu ne veux pas jouer avec du positionnement absolu (ou toute autre méthode de sortie du flux) pour laisser ton texte changer de taille en fonction de son contenu, il va falloir changer la translation sur la keyframe finale pour l’adapter à la longueur du texte.

Il faut bien faire attention à tes dimensions : tu déplaces ton texte dans un conteneur qui n’a pas forcément la même largeur.

Je te conseille de repartir d’un code propre et simple (comme le Codepen que je t’ai partagé) pour ajouter tes éléments de design un par un une fois l’animation implémentée.

Ton code est trop brouillon pour être utilisable en l’état : tu utilises trop d’unités diverses et variées et de propriétés qui n’ont pas de sens sans un meilleur contexte.

La répétition horizontale fluide en CSS pur va être compliquée : une fois que ton texte est à sa position de 100%, il faut bien recommencer à 0%.

Un contournement peut être de faire une boucle aller-retour en passant la fin en position intermédiaire et en dupliquant le départ comme fin, mais je doute que ce soit l’effet recherché.


Au passage, comme le souligne indirectement Gil Cot, ce genre d’animation est pas toujours du meilleur effet surtout chez les utilisateurs qui supportent mal les animations non désirées.

Par contre, Gil Cot, je ne comprends pas ton com

Hum… Le retour de <marquee></marquee> en CSS

PaulLoupSulitzer

Ce que tu cherches à faire, a été introduit officieusement par cette balise en HTML 4 ou 3 —je ne sais plus exactement Il y a déjà eu des tentatives de remplacer ce tag par du JS ou du CSS, et je vois ici une énième tentative de reproduire ce comportement …décrié.

Au passage, comme le souligne indirectement Gil Cot, ce genre d’animation est pas toujours du meilleur effet surtout chez les utilisateurs qui supportent mal les animations non désirées.

viki53

En effet, c’est du même acabit que les gifs et flash, ces textes qui bougent sans qu’on ait rien demandé. Il faut soit patienter pour pouvoir arriver à tout lire (puis se lasser et ne pas voir tout le reste de la page), soit passer outre pour essayer d’aller à l’essentiel, sans oublier les problèmes que posent ces animations aux outils d’assistance (sauf si on se fout de l’accessibilité.) Du coup si c’est du titre, ce genre de traitement ne lui donne pas son importance normal et le traite plutôt comme de la pub…

Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte