有没有办法在html中从右向左移动行？

我试着从右向左移动一条水平线，当它移动的时候，它的长度应该减少，变成零

我尝试了动画，但它是在循环中发生的。这应该只发生一次

这是我试过的代码

div{
顶部：100px；
宽度：100%；
高度：5px；
背景：黑色；
位置：相对位置；
动画：MyFirst10s2；
动画方向：初始；
溢出y：隐藏；
}
@关键帧myfirst{
0% {
背景：黑色；
左：0px；
顶部：0px；
}
100% {
背景：白色；
左：100%；
顶部：0px；
}
}

尝试设置此选项：

div{
    animation: myfirst 10s 1;
}

---

“animation”的最后一个参数用于动画迭代计数，您将其定义为“2”。

如果在代码笔中看不到它，则很难判断发生了什么

一个计数的正确动画属性应该是

动画：myfirst 10s 1

但是，如果这不起作用，您可以尝试添加
动画迭代计数：1？
尝试从下面的部分交换
left
的值，它将为您提供所需的结果。对于迭代计数，您可以在这里设置值
animation:myfirst10s2从
2到1

  0% {
    background: black;
    left: 100%;  -->this one
    top: 0px;
  }
  100% {
    background: white;
    left: 0px;  --> this one
    top: 0px;
  }



div{
顶部：100px；
宽度：100%；
高度：5px；
背景：黑色；
位置：相对位置；
动画：MyFirst10s1；
动画方向：初始；
溢出y：隐藏；
}
@关键帧myfirst{
0% {
背景：黑色；
左：100%；
顶部：0px；
}
100% {
背景：白色；
左：0px；
顶部：0px；
}
}
添加具有当前和所需状态的图像可能很有用。它可以使您更容易获得帮助。/*动画填充模式：forwards*/将以动画结束时的状态结束动画。那条黑线又回来了。我正在尝试将其宽度从100%设置为0