如何在没有跳转的情况下减慢悬停元素上的CSS动画？ [英] How to slow down CSS animation on hovering element without jumps?

问题描述

我试图在css中制作选框，这会在元素上悬停时放慢速度。我已经做了这样的事情，但它不会停止主动画，当鼠标退出选取框时，它会回到它的位置，就好像我什么也没做。

这里是CSS和HTML中的代码

  .prices {background-color ：＃f5fafd; font-size：14px;填充：6px 0; border-bottom：solid 1px＃d9d9d9; margin-left：0; margin-right：0;}。currency {text-align：center;颜色：＃444444; font-weight：300;}。marquee {height：30px; min-width：640px;宽度：100％;溢出：隐藏; position：relative;}。marquee p {position：absolute; width：640px;身高：100％;保证金：0; line-height：30px; text-align：center;过渡：全部0.3s缓解; 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％）; / *浏览器错误修复* / -webkit-transform：translateX（100％）; / *浏览器错误修复* / transform：translateX（100％）; } 100％{-moz-transform：translateX（-100％）; / *浏览器错误修复* / -webkit-transform：translateX（-100％）; / *浏览器错误修复* / transform：translateX（-100％）; }  

 < section class =container-fluid prices > < div class =row> < div class =marquee> < p为H. lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum< / p> < / DIV> < / div>< / section>  

解决方案

问题是两个动画的开始/结束点和持续时间都不相同。所以一个会比另一个更快，但他们不会在不同的时间槽具有相同的状态。

你可以想象这两个动画同时开始运行，它是就像你隐藏了一个，然后显示另一个。

这里是一个例子，悬停在第一个上，你会看到它的行为像第二个：

.marquee {height：30px; min-width：1140px;宽度：100％;溢出：隐藏; position：relative;}。marquee p {position：absolute;身高：100％;保证金：0; line-height：30px; text-align：center;过渡：全部0.3s缓解; 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为H. lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum< / p>< / div>< div class =marquee next> < p为H. lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum< / p>< / div>

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

元素的速度等于它的速度+它的容器的速度，在我们的例子中，容器没有移动，所以它的速度是0.所以这个想法就是让容器向相反的方向移动，这样我们就会产生负面的速度，因此文本看起来很慢。

下面是一个例子：

>

.marquee {height：30px; min-width：1140px;宽度：100％;溢出：隐藏;过渡：5s线性; transform：translateX（-10％）;}。marquee p {position：absolute;身高：100％;保证金：0; line-height：30px; text-align：center;过渡：全部0.3s缓解; 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为H. lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum< / p>< / div>

您可能会注意到，当容器开始移动时，速度下降，但当过渡结束时，文本获得初始速度。而且，当你释放鼠标时，文本将会在容器恢复到初始位置时获得更多速度。

所以，也许这不是一个通用的解决方案，使它慢到悬停时的固定速度，但您可以调整某些值以达到您所需的效果。特别是在容器的转换上使用了很大的价值，因为我认为用户不会维持悬停太久。

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>

解决方案

The issue is that both animations have the same start/end point and with different duration. So 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>

So 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. So the idea is to make the container to move in the opposite direction so that we have a negative speed and thus the text seems to be slow.

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.

So maybe it's not a generic solution to make it slow to a fixed speed on hover, but you can adjust some values in order to achieve the effect you need. Especially using big value on the transition of the container as I don't think the user will maintain the hover for too long.

这篇关于如何在没有跳转的情况下减慢悬停元素上的CSS动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！