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

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

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

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

＆＃13;

.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%);
  }
}

＆＃13;

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

＆＃13;

所以你不必在悬停时改变动画。相反，您可以考虑将容器向另一个方向移动。这个想法是依靠一些 Physics 。

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

以下是一个例子：

＆＃13;

.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%);
  }
}

＆＃13;

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

＆＃13;

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

所以也许它不是一个通用的解决方案，可以让它在悬停时慢到固定速度，但你可以调整一些值以达到你需要的效果。特别是在容器过渡时使用了很大的价值，因为我认为用户不会长时间维持悬停。

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

1 个答案: