问如何使用Javascript逐步改变属性值？例如：缓入缓出

EN

// Get a reference to the SVG filter only once:
const gaussianBlur =  document.getElementById('gaussianBlur');

// To control the animation: 0 to 100 we increase blur, 100 to 200 we decrease blur. We use these
// values instead of 0-10 and then divide by 10 to produce a smoother animation.
let step = 0;

function tick() {
  const blur = step < 100 ? step : 200 - step;

  // Update blur (converting step to 0-10). You could change this to take into account time:
  gaussianBlur.setAttribute('stdDeviation', blur / 10);

  // Update step:
  step = (step + 1) % 200;
  
  requestAnimationFrame(tick);
}

tick();

#element {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
}

<svg id="element" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <filter id="blurFilter" x="-100%" y="-100%" width="300%" height="300%">
    <feGaussianBlur id="gaussianBlur" />
  </filter>
  
  <circle cx="50" cy="50" r="25" style="filter: url(#blurFilter); " />
</svg>

#element {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
}

<svg id="element" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <filter id="blurFilter" x="-100%" y="-100%" width="300%" height="300%">
    <feGaussianBlur id="gaussianBlur" stdDeviation="1" />
  </filter>
  
  <animate
    xlink:href="#gaussianBlur"
    attributeName="stdDeviation"
    dur="2s"
    repeatCount="indefinite"
    values="0; 10; 0"
    keyTimes="0; .5; 1"
  />
  
  <circle cx="50" cy="50" r="25" style="filter: url(#blurFilter); " />
</svg>

let delta = 1;
let current = 0;
let loader = setInterval(breathe, 1000);
function breathe() {

    if (current === 10) delta = -1;
    else if (current === 0) delta = 1;
    current += delta;
    document.getElementById("main-blur")
        .setAttribute("stdDeviation", String(current));


}