CSS to emulate the fade of opacity without actually reducing opacity?

Question

Can this be done? Would I be wasting precious time even trying to string filters together in such a way as to emulate this, such as via CSS filters?

Similar questions I saw are filled with answers over half a decade old.

Answer 1

Changing the opacity is basically saying to the renderer "mix this element's color with whatever color is behind it".

It can be done, but the way to do it depends on the use-case, and gets tricky if you don't have a single color to base on.

Using filters

Basically you need to interpolate the HSB values from one color to another, depending on how much opacity you want, using a mix of hue-rotate, saturate and brightness.

Using animation

A simple example would be to transition the text color to the same as the background.

div {
  width: 250px;
  height: 65px;
  margin: 25px;
  background: #000;
}

h1 {
  animation: fadeToBlack 2s infinite ease-in-out;
  animation-direction: alternate;
  padding: 25px;
}

@keyframes fadeToBlack {
  from {
    color: #FFF;
  }
  to {
    color: #000;
  }
}

<div>
  <h1>I'm fading without opacity!</h1>
</div>