带有关键帧的简单直线动画

Question

我试图制作一个平滑的动画，但动画在在中间有一种"剪切错误"。

我该怎么修？

div,
div:after {
width: 0vw;
height: 3px;
position: fixed;
top: 1vw; bottom: 0;
left: 40vw; right: 40vw;
margin: auto;
/*  margin-top: -16px;*/
z-index: 600;
background-color: rgba(0, 0, 0, 1);
}
div {
/*background-color: transparent;*/
/*  border-top: 3px solid rgba(0, 0, 0, 0.1);
border-right: 3px solid rgba(0, 0, 0, 0.1);
border-bottom: 3px solid rgba(0, 0, 0, 0.1);
border-left: 3px solid black;
-webkit-transform: translateZ(0);
transform: translateZ(0);*/
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-name: animsition-loading;
animation-name: animsition-loading;
}
@-webkit-keyframes animsition-loading {
0% {
/*width: 0vw;*/
transform:translate(0vw);
width :0vw;
margin-left: 0;
}
50% {
/*width: 0vw;*/
/*transform:translate(5vw);*/
width :10vw;

}
100% {
/*width: 0vw;*/
transform:translate(1vw);
width :0vw;
margin-right: 0;
}
}

<div> </div>

Answer 1

这里有另一种用更少代码实现相同目的的方法：

.loading {
height: 3px;
position: fixed;
top: 2vw;
left: 40vw;
right: 40vw;
height: 3px;
background: linear-gradient(#000, #000) left/0% 100% no-repeat;
animation: anime 2s ease-in-out infinite alternate;
}
@keyframes anime {
0% {
background-size: 0% 100%;
background-position: left;
}
50% {
background-size: 70% 100%;
}
100% {
background-size: 0% 100%;
background-position: right;
}
}

<div class="loading"></div>

Answer 2

尝试以这种方式设置动画：

@-webkit-keyframes animsition-loading {
0% {
width :0;
left: 0;
}
50% {   
width :10vw;
}
100% {    
width :0;
right: 0;
}

这就是你想要的效果吗？

Answer 3

试试这个，你就完成了。。。不要使用变换平移，只使用宽度。

div,
div:after {
width: 0vw;
height: 3px;
position: fixed;
top: 1vw; bottom: 0;
left: 40vw; right: 40vw;
margin: auto;
/*  margin-top: -16px;*/
z-index: 600;
background-color: rgba(0, 0, 0, 1);
}
div {
/*background-color: transparent;*/
/*  border-top: 3px solid rgba(0, 0, 0, 0.1);
border-right: 3px solid rgba(0, 0, 0, 0.1);
border-bottom: 3px solid rgba(0, 0, 0, 0.1);
border-left: 3px solid black;
-webkit-transform: translateZ(0);
transform: translateZ(0);*/
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-name: animsition-loading;
animation-name: animsition-loading;
}
@-webkit-keyframes animsition-loading {

0% {
width :0;
left: 0;
}
50% {   
width :10vw;
}
100% {    
width :0;
right: 0;
}
}

<div> </div>