css动画反转

Question

我做了一个 css 动画，但我没有反向动画。我尝试了动画的变体版本，但我没有。它有一些错误。

.animation {
  stroke-dasharray: 296 0;
  stroke-dashoffset: 296;
  animation: geri-sayim 5s linear forwards;
}

.animation-reverse{
  stroke-dasharray: 296 296;
  stroke-dashoffset: 0;
  animation: doldur 2s linear forwards;
}

@keyframes geri-sayim {
  100% { stroke-dasharray: 296; }
}

@keyframes doldur {
  100% { stroke-dasharray: 0; }
}

.geri-sayim-sayaci{
  width:100px;
}

<div class="geri-sayim-sayaci">
  <svg class="viewbox" viewBox="-5 -5 110 110">
    <circle id="progress" class="animation-reverse" cx="50" cy="50" r="47"
            transform="rotate(-90 50 50)" pointer-events="all"
            stroke="#1e8bff" stroke-width="8" fill="none"/>
  </svg>
</div>

Answer 1

这是一种逻辑行为，因为您正在为 stroke-dasharray 指定一个值(尝试手动将此值更改为 0，您会看到)。我想你想要这样的东西，你需要用一个 0 指定两个值:

.animation {
  stroke-dasharray: 296 0;
  stroke-dashoffset: 296;
  animation: geri-sayim 2s linear forwards;
}

.animation-reverse{
  stroke-dasharray: 296 296;
  stroke-dashoffset: 0;
  animation: doldur 2s linear forwards;
}

@keyframes geri-sayim {
  100% { stroke-dasharray: 296 296; }
}

@keyframes doldur {
  100% { stroke-dasharray: 0 296; }
}

.geri-sayim-sayaci{
  width:100px;
}

<div class="geri-sayim-sayaci">
  <svg class="viewbox" viewBox="-5 -5 110 110">
    <circle id="progress" class="animation-reverse" cx="50" cy="50" r="47"
            transform="rotate(-90 50 50)" pointer-events="all"
            stroke="#1e8bff" stroke-width="8" fill="none"/>
  </svg>
</div>
<div class="geri-sayim-sayaci">
  <svg class="viewbox" viewBox="-5 -5 110 110">
    <circle id="progress" class="animation" cx="50" cy="50" r="47"
            transform="rotate(-90 50 50)" pointer-events="all"
            stroke="#1e8bff" stroke-width="8" fill="none"/>
  </svg>
</div>

或者您可以考虑在只需要一个值的地方设置 stroke-dashoffset 动画:

.animation {
  stroke-dasharray: 296;
  stroke-dashoffset: 296;
  animation: geri-sayim 2s linear forwards;
}

.animation-reverse{
  stroke-dasharray: 296;
  stroke-dashoffset: 0;
  animation: doldur 2s linear forwards;
}

@keyframes geri-sayim {
  100% { stroke-dashoffset: 0; }
}

@keyframes doldur {
  100% { stroke-dashoffset: 296; }
}

.geri-sayim-sayaci{
  width:100px;
}

<div class="geri-sayim-sayaci">
  <svg class="viewbox" viewBox="-5 -5 110 110">
    <circle id="progress" class="animation-reverse" cx="50" cy="50" r="47"
            transform="rotate(-90 50 50)" pointer-events="all"
            stroke="#1e8bff" stroke-width="8" fill="none"/>
  </svg>
</div>
<div class="geri-sayim-sayaci">
  <svg class="viewbox" viewBox="-5 -5 110 110">
    <circle id="progress" class="animation" cx="50" cy="50" r="47"
            transform="rotate(-90 50 50)" pointer-events="all"
            stroke="#1e8bff" stroke-width="8" fill="none"/>
  </svg>
</div>