SVG遮罩动画仅首次生效，后续过渡效果失效问题求助

我尝试使用SVG遮罩和CSS实现过渡效果，初始状态下效果正常，但触发1-2次（次数随机）后，过渡会变为瞬时完成，动画直接失效。我已检查生成的SVG代码，确认其与首次正常运行时完全一致，无异常。该问题在Firefox和Chrome浏览器中均会出现。

function lerp(start, end, t) {
  return start * (1 - t) + end * t;
}
const noise = (visible, wasVisible, durationSeconds = 1, seed = 44, liminal = 0.1) => {
  const startOp = lerp(liminal * 2, 1 + liminal * 2, wasVisible?1:0);
  const endOp = lerp(liminal * 2, 1 + liminal * 2, visible?1:0);

  const slope = -1 / (liminal * 2);
  const startIntercept = (startOp - liminal) * -slope;
  const endIntercept = (endOp - liminal) * -slope;


  return `
<svg xmlns="http://www.w3.org/2000/svg" viewport="0 0 100 100" width="100" height="100">
  <defs>
    <filter id="alpha-effect">
      <feFlood  x="0" y="0"
      width="100" height="100"/>
      <feGaussianBlur stdDeviation="3"/>
      <feComponentTransfer result="SMOOTH">
        <feFuncA type="table" tableValues="1 0.7 0.3 0"/>
      </feComponentTransfer>
      <feTurbulence seed="${seed}" result="NOISE" type="fractalNoise" baseFrequency="0.05" numOctaves="5"/>

      <feMerge>
        <feMergeNode in="NOISE"></feMergeNode>
        <feMergeNode in="SMOOTH"></feMergeNode>
    </feMerge>

      <feComponentTransfer>
        <feFuncA type="linear" slope="${slope}" intercept="${endIntercept}">
            <animate
            attributeName="intercept"
            from="${startIntercept}"
            to="${endIntercept}"
            dur="${durationSeconds}s" />
        </feFuncA>
      </feComponentTransfer>
    </filter>
  </defs>
  
  <rect x="0" y="0" width="100" height="100" 
        fill="blue" filter="url(#alpha-effect)"/>
</svg>
`;
};


let isCardVisible = true;
function toggleCard(){
    const card = document.querySelector('#card');
  const mask = noise(!isCardVisible, isCardVisible);
  isCardVisible = !isCardVisible;
 
  
  card.style['mask-image'] = `url(data:image/svg+xml;base64,${btoa(mask)})`;
  card.style['-webkit-mask-image'] = `url(data:image/svg+xml;base64,${btoa(mask)})`;
  card.style['mask-size'] = 'cover';
  card.style['-webkit-mask-size'] = 'cover';
  card.style['mask-repeat'] = 'no-repeat';  
}

document.querySelector('#button').addEventListener('click', toggleCard);

内容的提问来源于stack exchange，提问作者NikAkd