How to Stop a Marquee Automatically

If you already have the code for a CSS marquee, getting it to stop or pause is a piece of cake. You can pause a CSS marquee automatically at a given point, make it fly in then stop, or you can stop it based on user interaction (such as a hover over or mouseover).

Here, we pause the marquee half way through its iteration.

There would be a lot less code if we didn't use browser extensions (such as -webkit- and -moz-. These have been added for maximum browser support. Feel free to remove these, but be aware that the marquee might not work across all browsers. However, once browsers catch up with the W3C standard, these browser extensions can be removed.

The above pause was achieved with the following code:

40%   { transform: translateX(0%); }
60%   { transform: translateX(0%); }

and

40%   { -webkit-transform: translateX(0%); }
60%   { -webkit-transform: translateX(0%); }

and

40%   { 
 -moz-transform: translateX(0%); /* Firefox bug fix */
 -webkit-transform: translateX(0%); /* Firefox bug fix */
 transform: translateX(0%); 		
 }
 60%   { 
 -moz-transform: translateX(0%); /* Firefox bug fix */
 -webkit-transform: translateX(0%); /* Firefox bug fix */
 transform: translateX(0%); 		
 }

The first one is the W3C standard, the other two are browser-specific and can be removed once those browsers catch up to the W3C standard.

We effect the pause by using margin-left: 0%; at the 40% and 60% points. For a longer pause you can widen the gap between these two percentage points. For example, you could use 30% and 70% or any other value.

To remove the pause altogether, simply remove those blocks of code:

Stop & Start Gradually

You can make the marquee stop and start slowly (rather than come to an abrubt halt, and accelerate away at the same speed).

To do this, simply replace linear with ease in the animation declaration, so that the declaration looks like this:

/* Apply animation to this element */	
-moz-animation: example3 10s ease infinite;
-webkit-animation: example3 10s ease infinite;
animation: example3 10s ease infinite;

Here's the result: