我为进度条找到了很好的CSS动画。
但是我想while
而不是transform: translate
。
如何切换到left/right
?我试过了,但是不起作用:
https://codepen.io/shalimano/pen/wBmNGJ
transform
body{
background:#ffffff;
margin:50px 300px;
}
.slider{
position:absolute;
width:1000px;
height:5px;
overflow-x: hidden;
}
.line{
position:absolute;
opacity: 0.4;
background:#4a8df8;
width:150%;
height:5px;
}
.subline{
position:absolute;
background:#4a8df8;
height:5px;
}
.inc{
animation: increase 2s infinite;
}
.dec{
animation: decrease 2s 0.5s infinite;
}
@keyframes increase {
from { left: -5%; width: 5%; }
to { left: 130%; width: 100%;}
}
@keyframes decrease {
from { left: -80%; width: 80%; }
to { left: 110%; width: 10%;}
}
首次尝试:
<div class="slider">
<div class="line"></div>
<div class="subline inc"></div>
<div class="subline dec"></div>
</div>
但是不一样。
答案 0 :(得分:1)
您应该考虑以下事实:translate
的百分比值与元素大小有关,而不与父级大小有关,例如top
/ {{ 1}},并且要获得良好的性能,还需要用left
替换width
,以便仅使用transform而不使用trigger layout changes。
这里是仅使用变换的代码的近似值:
scale
body {
background: #ffffff;
margin: 50px 10px;
position:relative;
}
.slider {
position: absolute;
left:0;
right:0;
height: 5px;
overflow-x: hidden;
background: rgba(74, 141, 248, 0.4);
}
.slider:before,
.slider:after {
content: "";
position: absolute;
background: #4a8df8;
height: 5px;
width:100%;
transform:scaleX(0);
animation: increase 2s infinite linear;
}
.slider:after {
animation-delay:1s;
}
@keyframes increase {
from {
transform:translateX(0%) scaleX(0);
transform-origin:left;
}
50% {
transform-origin:left;
}
60% {
transform:translateX(0%) scaleX(0.5);
transform-origin:right;
}
80% {
transform:translateX(20%) scaleX(0.3);
transform-origin:right;
}
100% {
transform:translateX(0%) scaleX(0);
transform-origin:right;
}
}
答案 1 :(得分:-1)
定位元素的两种方法(transform: translate
和left
)之间的主要区别之一是它们对百分比的反应方式。您可以使用px
。