Reports

you can’t directly “animate” an SVG <filter> used as a CSS mask browsers don’t re-render filters unless something inside changes. So your <feTurbulence> is static by default.

The simple fix is to animate the baseFrequency in SVG, not in CSS. Like this:

<feTurbulence id="fogNoise" type="fractalNoise" baseFrequency="0.004" numOctaves="1" stitchTiles="stitch">
  <animate attributeName="baseFrequency" dur="8s" values="0.004;0.008;0.004" repeatCount="indefinite"/>
</feTurbulence>

Then reference that filter as your mask:

.page-heading::after {
  mask: url(#fogNoise);
  -webkit-mask: url(#fogNoise);
}

That’s it — the <animate> tag makes the noise “breathe” over time, giving you that subtle fog shimmer. No JS needed. Have a good day!

79808241