动画的css反转答案

【问题标题】：css reverse of animation动画的css反转
【发布时间】：2018-02-25 03:19:01
【问题描述】：

我做了一个 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>

【问题讨论】：

标签： css svg css-animations stroke-dasharray

【解决方案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>

【讨论】：