Css 如何设置滚动矩形的动画

我想设置一个矩形的动画，使其从屏幕的左侧滚动到屏幕的右侧。请注意，变换原点不应位于矩形的中心，而应位于右下角，以便它不会越过“hr”线或以任何方式反弹

这是我到现在为止所取得的成就，但我希望它能够不断移动，直到它到达屏幕的右边缘：

hr{
保证金：0；
}
div{
宽度：135px；
高度：135px；
框阴影：插入0 10px#000000；
变换原点：右下角；
动画名称：移动；
动画持续时间：2秒；
动画计时功能：线性；
动画延迟：0；
动画迭代次数：无限；
动画方向：交替；
}
@关键帧移动{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（90度）；
}
}

有趣的是，我会考虑添加一个翻译，诀窍是在两个状态之间快速切换以继续移动。p>
你正在旋转你的元素，用<强> 90DEG  >如果我们只考虑最终状态，在你的情况下，这个元素就等同于<强>平移，如果在两种情况下切换都是不可见的，那么你可以再次旋转你的元素，重复同样的技巧直到你达到需要。位置

hr{
保证金：0；
}
div{
宽度：135px；
高度：135px；
框阴影：插入0 10px#000000；
变换原点：右下角；
动画名称：移动；
动画持续时间：4s；
动画计时功能：线性；
动画延迟：0；
动画迭代次数：无限；
动画方向：交替；
}
@关键帧移动{
0% {
变换：旋转（0度）；
}
25% {
变换：旋转（90度）；
}
25.01% {
变换：translateX（计算（1*135px））旋转（0度）；
}
50% {
变换：translateX（计算（1*135px））旋转（90度）；
}
50.01% {
变换：translateX（计算（2*135px））旋转（0度）；
}
75% {
变换：translateX（计算（2*135px））旋转（90度）；
}
75.01% {
变换：translateX（计算（3*135px））旋转（0度）；
}
100% {
变换：translateX（计算（3*135px））旋转（90度）；
}
}

您需要边走边更改变换原点：


hr{
保证金：0；
}
div{
宽度：135px；
高度：135px；
框阴影：插入0 10px#000000；
变换原点：右下角；
动画名称：移动；
动画持续时间：12秒；
动画计时功能：线性；
动画延迟：0；
动画迭代次数：无限；
动画方向：交替；
边缘顶部：20px；
}
@关键帧移动{
0% {
变换：旋转（0度）；
变换原点：右下角；
}
25% {
变换：旋转（90度）；
变换原点：右下角；
}
25.1% {
变换：平移（100%，100%）旋转（90度）；
变换原点：右上角；
}
50% {
变换：平移（100%，100%）旋转（180度）；
变换原点：右上角；
}
50.1% {
变换：平移（300%，100%）旋转（180度）；
变换原点：左上；
}
75% {
变换：平移（300%，100%）旋转（270度）；
变换原点：左上；
}
75.1% {
变换：平移（400%，0%）旋转（270度）；
变换原点：左下角；
}
100% {
变换：平移（400%，0%）旋转（360度）；
变换原点：左下角；
}
}
测试
我刚开始使用这个配置时，发现正确的转换非常疯狂：）太棒了@VXp请注意以下值。。。像您这样使用非常小的值在所有情况下都不起作用。。测试时，它对chrome不起作用，但对我来说效果很好，chrome也是。当前值不合适。@VXp奇怪。。。它经过测试，但对我不起作用。。当我尝试使用0.1以下的值时，我也遇到了同样的问题。。。嗯，我已经把它们从0.5降到了0.1，我认为这样更好。。我会看看我这边发生了什么我运行了多次，没有任何问题，真的很奇怪。@VXp现在工作正常：/n不确定是什么问题。。可能是一个浏览器错误，造成了一种闪烁