我正试图在css中制作选框,这会在悬停在元素上时减慢速度.我做过类似的事情,但它不会停止主动画,当鼠标退出选框时,它会回到它的位置,好像我什么也没做.
.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>
解决方法
问题是两个动画都有相同的开始/结束点和不同的持续时间.所以一个会比另一个快,但他们在不同的时间段不会有相同的状态.
你可以想象两个动画同时开始运行,就像你隐藏一个动画并展示另一个动画.
这是一个示例,将鼠标悬停在第一个上,您将看到它的行为与第二个相似：
.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>
您可能会注意到,当容器开始移动时速度会降低但转换结束时,文本会获得初始速度.而且当您释放鼠标时,文本将获得更快的速度,因为容器将返回其初始位置.
所以也许它不是一种通用的解决方案,可以让它在悬停时降低到固定的速度,但你可以调整一些值以达到你需要的效果.特别是在容器转换时使用大值,因为我认为用户不会长时间维持悬停.
