How to slow CSS animation when an element hangs without transitions?

Question

I am trying to make marquee in css which will slow down when hovering over an element. I did something similar, but this does not stop the main animation, and when the mouse leaves the selection area, it returns to it, as if I did nothing.

Here is the code in CSS and HTML

.prices { background-color: #f5fafd; font-size: 14px; padding: 6px 0; border-bottom: solid 1px #d9d9d9; margin-left: 0; margin-right: 0; } .currency { text-align: center; color: #444444; font-weight: 300; } .marquee { height: 30px; min-width: 640px; width: 100%; overflow: hidden; position: relative; } .marquee p { position: absolute; width: 640px; height: 100%; margin: 0; line-height: 30px; text-align: center; transition: all 0.3s ease; transform: translateX(100%); animation: scroll-left 20s linear infinite; } .marquee:hover p { transform: translateX(100%); animation: scroll-left 30s linear infinite; } @keyframes scroll-left { 0% { -moz-transform: translateX(100%); /* Browser bug fix */ -webkit-transform: translateX(100%); /* Browser bug fix */ transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); /* Browser bug fix */ -webkit-transform: translateX(-100%); /* Browser bug fix */ transform: translateX(-100%); } } 

 <section class="container-fluid prices"> <div class="row"> <div class="marquee"> <p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p> </div> </div> </section> 

Answer 1

The problem is that both animations have the same start / end point and different durations. One will be faster than the other, BUT they will not have the same state in another time interval.

You can imagine that both animations run at the same time, and it looks like you are hiding one and you are showing the other.

Here is an example, hover over the first one and you will see that it behaves like the second:

 .marquee { height: 30px; min-width: 1140px; width: 100%; overflow: hidden; position: relative; } .marquee p { position: absolute; height: 100%; margin: 0; line-height: 30px; text-align: center; transition: all 0.3s ease; animation: scroll-left 20s linear infinite; } .marquee.next p,.marquee:hover p { animation: scroll-left 30s linear infinite; } @keyframes scroll-left { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } 

 <div class="marquee"> <p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p> </div> <div class="marquee next"> <p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p> </div> 

You do not need to change the animation on hover. Instead, you might consider moving the container in a different direction. The idea is to rely on some physics.

The speed of an element is equal to its speed + the speed of its container, and in our case the container does not move, so its speed is 0. The idea is to move the container in the opposite direction so that we have a negative speed so the text will be slower.

Here is an example:

 .marquee { height: 30px; min-width: 1140px; width: 100%; overflow: hidden; transition:5s linear; transform:translateX(-10%); } .marquee p { position: absolute; height: 100%; margin: 0; line-height: 30px; text-align: center; transition: all 0.3s ease; animation: scroll-left 20s linear infinite; } .marquee:hover { transform:translateX(0%); } @keyframes scroll-left { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } 

 <div class="marquee"> <p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p> </div> 

You may notice that when the container starts to move, the speed decreases, but when the transition ends, the text gains initial speed. And also, when you release the mouse button, the text will pick up speed, as the container will return to its original position.

This may not be a common solution to slow down your element at a fixed speed on hover, but you can adjust some values ​​to achieve the desired effect. Especially when using large values ​​when moving the container, since I do not think that the user will support the hover for too long.