我试着从右向左移动一条水平线，当它移动时，它的长度应该减少，变成零。
我尝试了动画，但它发生在循环。它应该只发生一次。
这是我试过的代码
<!DOCTYPE html>
<html>
<head>
<style>
div {
top: 100px;
width: 100%;
height: 5px;
background: black;
position: relative;
animation: myfirst 10s 2;
animation-direction: initial;
overflow-y: hide;
}
@keyframes myfirst {
0% {
background: black;
left: 0px;
top: 0px;
}
100% {
background: white;
left: 100%;
top: 0px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
加载时，黑线的宽度为100%，随着时间的推移，宽度逐渐减小
如果没有在代码中看到它，就很难判断出发生了什么。
一个计数的正确动画属性应为animation:myfirst 10s1；
但是，如果不起作用，您可以尝试添加animation-iteration-count:1；吗？
尝试设置此选项:
div{
animation: myfirst 10s 1;
}
“animation”的最后一个参数用于动画迭代计数，您将其定义为“2”。
null
<!DOCTYPE html>
<html>
<head>
<style>
div {
top: 100px;
width: 100%;
height: 5px;
background: black;
position: relative;
animation: myfirst 10s 2;
animation-direction: initial;
overflow-y: hide;
}
@keyframes myfirst {
0% {
background: black;
left: 100%;
top: 0px;
}
100% {
background: white;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>