Не срабатывает анимация в keyframes?

Question

[wakenbyWork]

.some-class {
  stroke-dasharray: var(--stroke-dash);
  stroke-dashoffset: calc(var(--stroke-dash) * 3);
}

.on-animation {
  animation-name: animeSvg;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes animeSvg {
    0% {
      stroke-dashoffset: calc(var(--stroke-dash) * 3);
    }

    50% {
      stroke-dashoffset: calc(var(--stroke-dash) * 2);
    }

    100% {
      stroke-dashoffset: var(--stroke-dash);
    }
  }

--stroke-dash - Устанавливается через js. И keyframes срабатывает, но без промежуточной анимации((

Т.е просто идет резкая смена от 0 к 50 к 100, сразу

Answer 1

[RAX7]

Единицы измерения добавь

@keyframes animeSvg {
  0% {
    stroke-dashoffset: calc(var(--stroke-dash) * 3px);
  }
  50% {
    stroke-dashoffset: calc(var(--stroke-dash) * 2px);
  }
  100% {
    stroke-dashoffset: calc(var(--stroke-dash) * 1px);
  }
}

Comments

[wakenbyWork]

Спасибо!) Просто через transition работало а тут нет, я в ступор впал))