Fade animation without opacity and fade-bloom in dark mode don't work

[makkabi]

Great project, but when playing around I got stuck with two issues regarding the fade-in (or out) and the fade-in-bloom animations. I am using the JIT compiler, and you can see the issues here:
Demo on Stackblitz

The fade-in only works when the element has an opacity value other than 1, which may be intended, but isn't mentioned. I suggest changing

@keyframes fade-in {
  to { opacity: 1 }
}

to

@keyframes fade-in {
from {opacity: 0}
  to { opacity: 1 }
}

The other thing is that the fade-in-bloom animation doesn't work in dark mode, because somehow the value of the --fade-in-bloom variable gets set to the keyframes in OS dark mode:

@media (prefers-color-scheme: dark)
:root {
    --animation-fade-in-bloom: @keyframes fade-in-bloom { 0% { opacity: 0; filter: brightness(1) blur(20px) } 10% { opacity: 1; filter: brightness(0.5) blur(10px) } 100% { opacity: 1; filter: brightness(1) blur(0) } };
}

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• jit-open-props-z5jwmn (Open reproduction)

[argyleink]

Hi @makkabi, thanks for the report!

fade-in only works with some opacity set to something other than 1

Yes, while this may not appear as useful as some explicit from/to keyframes, it has composability. It's just an effect, not a timeline. It's not as common that keyframes are used this way, but it's how all of them are setup in OP and it allows more flexibility, but does require a bit more know how.

You can however, play the fade-out animation in reverse, which will set opacity to 0 for you

.box {
  animation: var(--animation-fade-out) reverse;
}

not as obvious, but neat and useful.

bloom animations and jit-props

yes, this looks like a bug, the value of the custom property is all the keyframes, there's an injection issue. i'll check this out asap 👍🏻

[argyleink]

adaptive keyframe bug fixed in v1.0.9 👍🏻

[argyleink]

that means this issue can close?

[makkabi]

Works fine now, thanks!