3-секундная анимация, которая повторяется с requestAnimationFrame

Question

У меня есть SVG с анимацией с использованием requestAnimationFrame, и анимация работает, но я хочу, чтобы она анимировалась в течение 3 секунд, а затем повторялась, поэтому анимация для круга будет анимировать dasharray и dashoffsset в течение 3 секунд. знать, как сделать это с помощью CSS, потому что для этого требуется вычисление в javascript с использованием Math. Может кто-нибудь посмотреть, сможет ли эта анимация работать так, как я описал. codepen.io

HTML

<svg width="20" height="20" viewBox="0 0 20 20">
  <circle cx="10" cy="10" r="7" fill="none" stroke="#e6e6e6" stroke-width="6" />
  <circle id="shape" cx="10" cy="10" r="7" fill="none" stroke="#ff0000" stroke-width="6" stroke-linecap="square" /> 
</svg>

CSS

#shape {
 fill: none;
 stroke: red;
 stroke-width: 6;
 transition: all 4s ease-in-out;
 transform: rotate(-90deg);
 transform-origin: 50%;
}

JavaScript

var endPercentage = 100;

var shape = document.getElementById('shape');
var circumference = Math.PI * parseFloat(shape.getAttribute('r')) * 2;

shape.setAttribute('stroke-dasharray', circumference);
shape.setAttribute('stroke-dashoffset', circumference);

var updatePercentage = function () {
    var dashOffset = parseFloat(getComputedStyle(shape)['stroke-dashoffset']);
    var curPercentage = Math.floor((100 * (circumference - dashOffset)) / circumference) || 0;

    document.getElementById('perc').getElementsByClassName('value')[0].innerText = curPercentage;

    if (curPercentage < endPercentage) {
        window.requestAnimationFrame(updatePercentage);
    }
}

var animateShape = function (percent) {
    var offset = circumference - (circumference * percent / 100);
    shape.setAttribute('stroke-dashoffset', offset);
    window.requestAnimationFrame(updatePercentage);
}

setTimeout(function () {
    animateShape(endPercentage);
}, 0);

Answer 1

Вы можете определить pi с помощью:

:root {
  --PI: 3.14159265358979; 
}

...

stroke-dashoffset: calc(2 * var(--PI) * 7);
/* 7 is the radius of your circle */

С помощью этой комбинации и calc вы сможете получить чистое решение CSS.

ЕслиВы все еще хотите пройти по маршруту JS, я рекомендую:

  shape.animate([
    { strokeDashoffset: 0 },
    { strokeDashoffset: circumference }
  ], { duration: 3000, iterations: Infinity });

Внимание: для старых браузеров требуется полифил.