如何在没有跳跃的情况下减慢悬停元素上的CSS动画？

Question

我正在尝试在css中制作选框,这会在悬停在元素上时减慢速度.我已经完成了类似的操作,但它并没有停止主动画,当鼠标退出选框时,它会回到它的位置,好像我什么也没做.

这是CSS和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

问题是两个动画都有相同的起点/终点和不同的持续时间.所以一个会比另一个更快,但他们在不同的时间段不会有相同的状态.

你可以想象两个动画同时开始运行,就像你隐藏一个动画并展示另一个动画.

这是一个示例,将鼠标悬停在第一个上,您将看到它的行为与第二个相似:

.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>

因此您不必在悬停时更改动画.相反,您可以考虑将容器向另一个方向移动.这个想法是依靠一些物理学.

一个元素的速度等于它的速度+它的容器的速度,在我们的例子中,容器没有移动所以它的速度是0.所以想法是让容器向相反的方向移动,这样我们就有了负速度,因此文本似乎很慢.

这是一个例子:

.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>

您可能会注意到,当容器开始移动时速度会降低但转换结束时,文本会获得初始速度.而且当您释放鼠标时,文本将获得更快的速度,因为容器将返回其初始位置.

因此,也许它不是通用的解决方案,使其在悬停时降低到固定速度,但您可以调整一些值以达到您需要的效果.特别是在容器转换时使用大值,因为我认为用户不会长时间维持悬停.