Variable opacity states for fade animations

[sjInside]

Is your feature request related to a problem? Please describe.
Hi, when I am using fade animations (e. g. fadeInLeft) I whould like to be able to specify the boundaries of my opacity.

Describe the solution you'd like
In addition to the existing CSS variables you could add variables for the opacity set by the animations.

Something like:

@keyframes fadeInLeft {
   from {
    opacity: var(--fade-opacity-start, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: var(--fade-opacity-end, 1);
    transform: translate3d(0, 0, 0);
  }
}

and then

.animated-element{
  --fade-opacity-end: 0.5;
  animation-name: fadeInLeft;
}

Additional context
Sometimes you have the situation when you don't want to fully fade an element in or out. Without this feature you can't use opacity on animated elements at all since the keyframes overwrite any opacity value during the animation.

[pomodory]

@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}

to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

we also want to specify transform translate3d(0, 100%, 0) -> translate3d(0, 50%, 0)

[warengonzaga]

Thanks for the suggestion guys, I'll work on it! 🚀😁
Can you assign this to me @eltonmesquita?