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

概述我正试图在css中制作选框,这会在悬停在元素上时减慢速度.我做过类似的事情,但它不会停止主动画,当鼠标退出选框时,它会回到它的位置,好像我什么也没做. 这是CSS和HTML中的代码 .prices { background-color: #f5fafd; font-size: 14px; padding: 6px 0; border-bottom: solid 1px #d9d9d 我正试图在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 >  <div >    <div >      <p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>    </div>  </div></section>

解决方法 问题是两个动画都有相同的开始/结束点和不同的持续时间.所以一个会比另一个快,但他们在不同的时间段不会有相同的状态.

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

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

.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 >  <p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p></div><div >  <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 >  <p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p></div>

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

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

总结

以上是内存溢出为你收集整理的html – 如何在没有跳转的情况下减慢悬停元素上的CSS动画？全部内容，希望文章能够帮你解决html – 如何在没有跳转的情况下减慢悬停元素上的CSS动画？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。