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

如何播放关键帧0％-50％然后从50％-100％连续循环？我知道这可以通过添加/删除div中的类来实现,但我想在没有 javascript的情况下执行此操作.

body {
  background: black;
}

@keyframes divReady {
  0% { width: 0vmin; }
  50% { width: 20vmin; transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#the-div {
  position: absolute;
  top: 40vmin;
  left: 40vmin;
  width: 0vmin;
  height: 20vmin;
  background: orange;
  animation: divReady 2s;
  animation-iteration-count: 2;
}

<div id="the-div">
</div>

考虑两个动画.一个有前锋而另一个有一个延迟等于第一个持续时间：

body {
  background: black;
}

@keyframes divReady-one {
  0% { width: 0vmin; }
  100% { width: 20vmin; }
}

@keyframes divReady-two {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#the-div {
  position: absolute;
  top: 40vmin;
  left: 40vmin;
  width: 0vmin;
  height: 20vmin;
  background: orange;
  animation: 
    divReady-one 1s forwards,
    divReady-two 2s 1s infinite;
}

<div id="the-div">
</div>