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

Question

如何播放关键帧 0%-50% 然后从 50%-100% 连续循环？我知道这可以通过从 div 添加/删除 class 来实现，但我想在没有 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>

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

CSS one regular animation one looping animation NO JS

css

keyframe

css-animations

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

CSS one regular animation one looping animation NO JS

css

keyframe

css-animations

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