CSS一个常规动画一个循环动画无JS

如何播放关键帧0%-50%，然后从50%-100%连续循环？我知道这可以通过在div中添加/删除一个类来实现，但我希望在不使用javascript的情况下实现这一点

正文{
背景：黑色；
}
@关键帧准备就绪{
0%{宽度：0vmin；}
50%{宽度：20V分钟；变换：旋转（0度）；}
100%{变换：旋转（360度）；}
}
#潜水艇{
位置：绝对位置；
顶部：40V分钟；
左：40分钟；
宽度：0毫米；
高度：20vmin；
背景：橙色；
动画：divReady 2s；
动画迭代次数：2次；
}

---

考虑两个动画。一个具有

转发

，一个具有等于第一个的持续时间的延迟的无限长：

正文{
背景：黑色；
}
@关键帧1{
0%{宽度：0vmin；}
100%{宽度：20vmin；}
}
@关键帧二{
0%{变换：旋转（0度）；}
100%{变换：旋转（360度）；}
}
#潜水艇{
位置：绝对位置；
顶部：40V分钟；
左：40分钟；
宽度：0毫米；
高度：20vmin；
背景：橙色；
动画：
准备好1秒前进，
两个2s无穷大；
}

---

不能在一个关键帧内执行此操作，可以使用两个关键帧和两个DIV元素，请参见下文

正文{
背景：黑色；
}
@关键帧ani1{
0%{宽度：0vmin；}
100%{宽度：20vmin；}
}
@关键帧ani2{
0%{变换：旋转（0度）；}
100%{变换：旋转（360度）；}
}
#第一组{
顶部：40V分钟；
左：40分钟；
宽度：20vmin；
高度：20vmin；
位置：绝对位置；
动画：ANI21；
动画延迟：1s；
动画迭代次数：无限；
}
#第二组{
宽度：20vmin；
高度：20vmin；
背景：橙色；
动画：ANI11；
}