Javascript 检测css动画停止

我的网站上有一个太空船物体，从左到右移动到屏幕上的查看端口

我需要显示另一个太空船物体从右向左移动，一旦上面提到的太空船物体到达终端屏幕的视图端口

问题

我试图给第二个宇宙飞船对象动画延迟，但它不是我想要的工作。因为不同屏幕的浏览器宽度不同

这是我的密码

.宇宙飞船-1 img{ 宽度：100px； 动画：宇宙飞船1号10秒慢进慢出1； 动画填充模式：正向； } @-webkit为spaceship-1设定关键帧{ 0% { transform:translateX0； } 100% { 转换：translateX100vw； } } .宇宙飞船-2 img{ 宽度：100px； 动画：宇宙飞船2号10秒慢进慢出1； 动画填充模式：正向； 动画延迟：5s； 位置：绝对位置； 右：0； 底部：15px； } @-webkit为太空船-2设定关键帧{ 0% { transform:translateX0； } 100% { 转化：translateX-100vw； } }

---

如果希望第二个动画在第一个动画之后立即开始，则必须将动画延迟设置为等于第一个动画的动画持续时间，即10秒。 你也应该让它们都是绝对的

身体{ 背景：f6f6f6； 溢出x：隐藏； } .宇宙飞船-1 img{ 宽度：100px； 动画：宇宙飞船1号10秒慢进慢出1； 动画填充模式：正向； 位置：绝对位置； 左：0； 顶部：10px； } @-webkit为spaceship-1设定关键帧{ 0% { transform:translateX0； } 100% { 转换：translateXcalc100vw-100px； } } .宇宙飞船-2 img{ 宽度：100px； 动画：宇宙飞船2号10秒慢进慢出1； 动画填充模式：正向； 动画延迟：10秒； 位置：绝对位置； 变换：旋转180度； 右：0； 底部：10px； } @-webkit为太空船-2设定关键帧{ 0% { 变换：translateX0旋转180度； } 100% { 变换：translateXcalc-100vw+100px旋转180度； } }

---

也许AnimationEvent就是你想要的：谢谢！但我找到了更好的css解决方案。