I have a css
marquee where I need to change speed in intervals.
For example: Current speed for animation is set for 120 seconds. What do I need is to change the animation speed like this: First 3 seconds animation speed: 120s, after 3-8 seconds speed up to animation speed 20s, after 8 seconds stop for 2 seconds to animation speed 0, after it repeat again in the loop. The transitions should be not visible in speed change, it should be smooth.
My current demo
.marquee {
width: 100%;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: marquee 120s linear infinite;
background: red;
color:white;
}
@keyframes marquee {
0% { text-indent: -150em }
100% { text-indent: 0em }
}
<p class="marquee">creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits • creativity without limits<span style="white-space: pre-wrap;"></span></p>
Thanks in advance
from Marquee speed up and slow down in intervals
No comments:
Post a Comment