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

Question

如何播放关键帧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>

Answer 1

考虑两个动画。一个与forwards和无限的一个延迟等于第一个的持续时间：

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>

Answer 2

您无法在一个关键帧中执行此操作，您可以使用两个关键帧和两个DIV元素，如下所示。

body {
  background: black;
}

@keyframes ani1 {
  0% { width: 0vmin; }
  100% { width: 20vmin; }
}

@keyframes ani2 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#div1 {
  top: 40vmin;
  left: 40vmin;
  width: 20vmin;
  height: 20vmin;
  position: absolute;
  animation: ani2 1s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

#div2 {
  width: 20vmin;
  height: 20vmin;
  background: orange;
  animation: ani1 1s;
}

<div id="div1">
<div id="div2">
</div>
</div>