CSS动画定向问题

我们正在尝试按如下方式设置div的动画：

1-从0延伸到100%（从左到右）

2-然后从100%收缩到0（也从左到右）

3-然后重复

我们有以下部门：

div{
位置：绝对位置；
高度：2倍；
背景：#c60000；
左：0；
排名：0；
颜色：#789；
宽度：0；
动画持续时间：5s；
动画名称：进度；
动画迭代次数：无限；
}
@关键帧进度{
50% {
//变换原点：右上角；
宽度：100%；
}
}

div{
位置：绝对位置；
高度：2倍；
背景：#c60000；
排名：0；
颜色：#789；
动画持续时间：5s；
动画名称：进度；
动画迭代次数：无限；
动画计时功能：线性；
}
@关键帧进度{
0% {
左：0；
宽度：0；
}
50% {
右：0；
宽度：100%；
}
100% {
右：0；
宽度：0；
}
}

div{
位置：绝对位置；
高度：2倍；
背景：#c60000；
排名：0；
颜色：#789；
动画持续时间：5s；
动画名称：进度；
动画迭代次数：无限；
动画计时功能：线性；
}
@关键帧进度{
0% {
左：0；
宽度：0；
}
50% {
右：0；
宽度：100%；
}
100% {
右：0；
宽度：0；
}
}