Durée de l'animation?

Question

Je simple marquee CSS défilement vers le haut à travers un écran, essentiellement en utilisant le code trouvé ici (jsFiddle):

https://jsfiddle.net/c8r5kc1L/1/

<style style="text/css"> 
.marquee-outer { 
height: 100px; 
overflow: hidden; 
position: relative; 
color: orange; 
} 
.marquee-inner { 
position: absolute; 
width: 100%; 
height: 100%; 
margin: 0; 
line-height: 50px; 
text-align: center; 
/* Starting position */ 
-moz-transform:translateY(100%); 
-webkit-transform:translateY(100%);  
transform:translateY(100%); 
/* Apply animation to this element */ 
-moz-animation: scroll-up 5s linear infinite; 
-webkit-animation: scroll-up 5s linear infinite; 
animation: scroll-up 5s linear infinite; 
} 
/* Move it (define the animation) */ 
@-moz-keyframes scroll-up { 
0% { -moz-transform: translateY(100%); } 
100% { -moz-transform: translateY(-100%); } 
} 
@-webkit-keyframes scroll-up { 
0% { -webkit-transform: translateY(100%); } 
100% { -webkit-transform: translateY(-100%); } 
} 
@keyframes scroll-up { 
0% { 
-moz-transform: translateY(100%); /* Browser bug fix */ 
-webkit-transform: translateY(100%); /* Browser bug fix */ 
transform: translateY(100%);  
} 
100% { 
-moz-transform: translateY(-100%); /* Browser bug fix */ 
-webkit-transform: translateY(-100%); /* Browser bug fix */ 
transform: translateY(-100%); 
} 
} 
</style> 

<div class="marquee-outer"> 
<div class="marquee-inner">Text</div> 
</div> 

Je suis en train d'entrer dans plusieurs paragraphes d'une valeur de contenu dans le défilement réelle zone, ce qui signifie que l'animation réinitialise avant que j'ai passé à travers tout le contenu. Si j'augmente la durée de l'animation (disons à 100s), l'animation ralentit et finit par passer par la même quantité (partielle) d'information.

Y at-il un moyen de maintenir la vitesse de défilement constante, mais en fait d'augmenter la durée du défilement avant la réinitialisation?

Answer 1

J'ai trouvé une solution, si vous « sync » le -100% avec le montant des paragraphes que vous voulez (et utilise <p> l'intérieur <div class="marquee-inner"> parce qu'il vous donne plus de contrôle dans l'animation de défilement):

100% { 
    transform: translateY(-100%); 
} 

Alors est vous voulez avoir 4 paragraphes faire quelque chose comme ceci:

100% { 
    transform: translateY(-400%); 
} 

Et aussi ne pas utiliser line-height: 50px; dans .marquee-inner plutôt utiliser margin-bottom:

.marquee-inner p{ 
    margin-bottom: 30px; 
} 

Regardez l'exemple: https://jsfiddle.net/u2j2679u/