Problème d'animation CSS

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

Hello,

Il faut que ton texte dépasse à gauche, tu peux donc utiliser une valeur négative pour le permettre

Salut viki53, J’ai déjà essayé (en vw, % et px), mais soit c’est pas assez, soit cela fait démarrer le texte en plein milieu du body Merci de ton aide

GENIAL !!! C’était mes keyframes qui n’allaient pas :/ Super !!! Sais-tu comment répéter le texte si ce n’est pas abusé ? Bon week-end et encore merci !

Difficile de le répéter uniquement en CSS, à moins de jouer avec un attribut data et la propriété CSS content.

Je vais chercher. Merci encore

Avec les ombres, c’est peut-être plus facile ?

text-shadow: 2em 0em #333

Le texte est bien répété, mais stagne au bout de la 1ère répétition. Sais-tu comment régler ça ? Bon week-end

Hmmm je n’ai pas ce problème de mon côté, tu peux partager ton code complet ?

Merci pour ta réactivité https://jsfiddle.net/herde2/ep2vz5bh/1/ Merci beaucoup

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.

Compris et fait Mais il n’y a pas de répétition horizontale, faire que le texte défile non stop. Bonne soirée et merci

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

Merci de m’avoir aidé, j’ai pas mal avancé Par contre, Gil Cot, je ne comprends pas ton com

Hum… Le retour de <marquee></marquee> en CSS Encore merci et bon dimanche

Merci pour tout viki53. Bonne fin de journée

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é.

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…

Oui Gil Cot, C’est uniquement pour de l' "habillage", traité comme de la pub, je te l’accorde. Juste un effet graphique Bonne soirée