How to slow down CSS animation on hovering element without jumps?

Question

I'm trying to make marquee in css that will slow down on hovering over the element. I have done something like this but it doesn't stop the main animation and when the mouse exits the marquee it goes back to it's position as if I didn't do anything.

Here's 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 issue is that both animations have the same start/end point and different duration. One will be faster than the other BUT they won't have the same state at different time slot.

You can imagine both animations start running at the same time and it's like you hide one and you show the other one.

Here is an example, hover on the first one and you will see it behave like the second one:

.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 don't have to change animation on hover. Instead you may consider moving the container in the other 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 is not moving so its speed is 0. The idea is to move the container in the opposite direction so that we have a negative speed thus 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 start moving the speed decreases but when the transition ends, the text gain it's initial speed. And also when you release the mouse the text will gain more speed as the container will get back to its initial position.

Maybe this is not a generic solution to make your element slower at a fixed speed on hover, but you can adjust some values in order to achieve the effect you need. Especially by using big values on the transition of the container as I don't think the user will maintain the hover for too long.