Sunday, 2 October 2022

Marquee speed up and slow down in intervals

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