[SOLVED] css reverse of animation

css reverse of animation

I did a css animation but I didn't animation-reverse. I tried variation version of the animation but I didn't. It has got some bug.

.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>

Solution

This is a logic behavior as you are specifing one value to stroke-dasharray (try to manually change this value for 0 and you will see). I think you want to have something like this where you need to specify two values with one 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>

Or you can consider animating stroke-dashoffset where you only need one value:

.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>