Javascript css动画

我想移动我的左对象直到红色框，然后隐藏它，然后我想在红色框附近显示右对象，然后该对象也将从红色框移动到页面的右侧。 如何做到这一点？ 有关说明，请单击此处

---

刚刚挑战了我自己。您可以在相对定位的容器中使用绝对定位，并在第二个对象处设置彼此的绝对位置的动画（延迟）

。所有容器{
位置：相对位置；
宽度：100%；
高度：50px；
}
上一篇{
位置：绝对位置；
左：0；
顶部：10px；
宽度：40px；
高度：40px；
背景：蓝色；
z指数：1；
动画名称：man_prev；
动画持续时间：3s；
动画延迟：0s；
动画填充模式：正向；
动画迭代次数：无限；
}
.红盒子{
位置：绝对位置；
左：50%；
变换：translateX（-50%）；/*使其居中*/
排名：0；
宽度：60px；
高度：60px；
背景：红色；
z指数：2；
}
曼努先生，下一个{
位置：绝对位置；
左：50%；
变换：translateX（-50%）；/*使其居中*/
顶部：10px；
宽度：40px；
高度：40px；
背景：绿色；
z指数：1；
动画名称：man_next；
动画持续时间：3s；
动画延迟：2.3s；
动画填充模式：正向；
动画迭代次数：无限；
}
@关键帧man_prev{
从{左：0；}
到{左：50%；变换：translateX（-50%）；}
}
@为man_下一步设置关键帧{
从{左：50%；变换：translateX（-50%）；}
到{左：100%；变换：translateX（-100%）；}
}

---

尝试具有如下转换延迟的转换属性

欲了解更多信息，请阅读

.a{
左：0；
过渡：左2s线性0s，不透明度0s线性2s；
}
.b{
左：50%；
}
c{
左：50%；
过渡：不透明度0s线性2s，左2s线性2s；
不透明度：0；
}
使生动活泼{
左：50%；
不透明度：0；
}
动画{
左：96%；
不透明度：1；
}

使活动
$（#abc”）。在（“单击”，函数（）上{
$（“.a”）.addClass（“动画”）
$（“.b”）.addClass（“动画”）
$（“.c”）.addClass（“动画”）
});

请参观一下。如果您不提供任何代码，我们将无法帮助您-查看如何创建检查更新答案请回答我的问题。现在有点忙。将在大约一小时内调查此事。：）好的，非常感谢。非常感谢。。它起作用了。但是你知道如何在循环模式下运行这个动画吗？更新了我的答案。知道。如果你认为这是正确的答案，你可以接受。我想再问一个问题，不是关于这个，但系统不允许我这么做。