Css 延迟动画，使其在Xs之后转到另一个方向

我正在深入了解动画属性和关键帧。这是我正在做的装载机。我很难用

动画延迟和多个动画的方法从右向左移动

这一点应该是从左>右，右>左。

停在那里，直到其他点从另一个方向返回，然后重新开始，停在那里，直到其他点返回

我的方法是：

完全解决方案


正文{
背景色：#111111；
}
[数据am动画]{
框大小：边框框；
背景色：白色；
弯曲方向：行；
利润率：30像素；
位置：相对位置；
高度：180像素；
宽度：120px；
}
[数据am动画].dot{
背景颜色：深蓝；
位置：绝对位置；
高度：30px；
宽度：30px；
边界半径：50%；
}
[数据am动画].dot.down{
左：30px；
动画名称：下载；
动画持续时间：5s；
动画计时功能：线性；
动画方向：交替；
动画迭代次数：无限；
}
[数据am动画].dot.up{
左：60px；
动画名称：加载；
动画持续时间：5s；
动画计时功能：线性；
动画方向：交替；
动画迭代次数：无限；
}
[数据am动画].dot.through{
左：0；
最高：50%；
利润上限：-15px；
/*动画名称：加载通过；
动画持续时间：（$animation speed/2.6）；
动画计时功能：线性；
动画方向：交替；
动画迭代次数：无限；
动画延迟：（$animation speed/1.3）*/
动画：通过右1.66667s线性无限3.125s加载，通过左1.66667s线性无限3.125s加载；
}
/*关键帧开始*/
@加载关键帧{
0% {
变换：平移（0,0）；
背景颜色：深蓝；
}
100% {
转换：转换（0，150px）；
背景颜色：深粉色；
}
}
@关键帧加载{
0% {
转换：转换（0，150px）；
背景颜色：深粉色；
}
100% {
变换：平移（0,0）；
背景颜色：深蓝；
}
}
@关键帧通过右侧加载{
0% {
变换：平移（0,0）；
背景颜色：深蓝；
}
100% {
变换：平移（90px，0）；
背景颜色：深粉色；
}
}
@从左到右加载关键帧{
0% {
变换：平移（90px，0）；
背景颜色：深粉色；
}
100% {
变换：平移（0,0）；
背景颜色：深蓝；
}
}
/*关键帧结束*/
这里是一个单一动画的方法。让我知道这是否是你的方向，或者我可能不理解你的愿望


正文{
背景色：#111111；
}
[数据am动画]{
框大小：边框框；
背景色：白色；
弯曲方向：行；
利润率：30像素；
位置：相对位置；
高度：180像素；
宽度：120px；
}
[数据am动画].dot{
背景颜色：深蓝；
位置：绝对位置；
高度：30px；
宽度：30px；
边界半径：50%；
}
[数据am动画].dot.down{
左：30px；
动画名称：下载；
动画持续时间：5s；
动画计时功能：线性；
动画方向：交替；
动画迭代次数：无限；
}
[数据am动画].dot.up{
左：60px；
动画名称：加载；
动画持续时间：5s；
动画计时功能：线性；
动画方向：交替；
动画迭代次数：无限；
}
[数据am动画].dot.through{
左：0；
最高：50%；
利润上限：-15px；
/*动画名称：加载通过；
动画持续时间：（$animation speed/2.6）；
动画计时功能：线性；
动画方向：交替；
动画迭代次数：无限；
动画延迟：（$animation speed/1.3）*/
动画：通过右5s线性无限加载；
}
/*关键帧开始*/
@加载关键帧{
0% {
变换：平移（0,0）；
背景颜色：深蓝；
}
100% {
转换：转换（0，150px）；
背景颜色：深粉色；
}
}
@关键帧加载{
0% {
转换：转换（0，150px）；
背景颜色：深粉色；
}
100% {
变换：平移（0,0）；
背景颜色：深蓝；
}
}
@关键帧通过右侧加载{
0%, 20% {
变换：平移（0,0）；
背景颜色：深蓝；
}
50%, 70% {
变换：平移（90px，0）；
背景颜色：深粉色；
}
}
@从左到右加载关键帧{
0% {
变换：平移（90px，0）；
背景颜色：深粉色；
}
100% {
变换：平移（0,0）；
背景颜色：深蓝；
}
}
/*关键帧结束*/

您为什么需要下载动画？为什么不使用1呢？@MoshFeu我完全支持上面提到的建议。如果你对如何实现我想要的解决方案有任何想法，我完全赞成。我以前只做过基本的事情。这就是为什么我在这里问：）我也许可以调整它。不确定这种情况下的百分比，是不是0，20%你应该在这个0，0位置保持空闲，50，70%保持不变？它保持在
0，0
直到
20%
和
50%
-等待
70%
。有见识的