CSS 一常规动画一循环动画 NO JS答案

【问题标题】：CSS one regular animation one looping animation NO JSCSS 一常规动画一循环动画 NO JS
【发布时间】：2019-07-06 15:15:19
【问题描述】：

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

【问题讨论】：

标签： css css-animations keyframe

【解决方案1】：

您不能在一个关键帧内执行此操作，您可以使用两个关键帧和两个 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>

【讨论】：

【解决方案2】：

考虑两个动画。一个是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>

【讨论】：