For example, check your link: https://codepen.io/grayghostvisuals/pen/noItd in firefox browser.

I just stumbled upon one bug.

If you use filter on the parent element of a fixed positioned element.
Your Position fixed won’t work.

The backdrop-filter CSS property

My code:

img {
    -webkit-filter: brightness(0%);
    filter: brightness(0%);
}

:root {
    filter: invert(150%);
}

Thanks!

The only way of doing this would be to seperate the text and background container and then put the text absolute on top of that container:

<div class="background" style="filter:grayscale(100)"></div>
<div class="text" style="position: absolute; margin-top:-100px">
    I am so funny
</div>

Hey, you just have to change code from -webkit- to without that (or add new lines without -webkit-). Like that:

img.animated {
  -webkit-animation: filter-animation .5s infinite;
  animation: filter-animation 5s infinite;
}

@keyframes filter-animation {
  0% {
    filter: sepia(0) saturate(2);
  }

50% {
    filter: sepia(1) saturate(8);
  }

100% {
    filter: sepia(0) saturate(2);
  }
}

And then it will work on Mozilla. Chris just write the code only for Chrome and Safari.

The animation is NOT working at all on Firefox 46.0.1.
Any ideas?
Cheers…

The image has hotlinking protection for some domains, it seems.

If it’s an svg icon loaded in, or with some PNGs you could also do:
filter: contrast(0) brightness(200%);

Actually, you need to use -moz for firefox. -ms is for Microsoft Internet Explorer