How to make @keyframes start from current property value?

If you are simply concerned about setting the end state relative to the present state of an element, You want a transition not an animation.

Transitions allow you to set the desired outcome and keyframes are then extrapolated automatically from the current state of the element.

e.g. in the below- applying the .minimized class to .window would reduce its size with only the endpoints specified.

.window{
   transition: all 250ms ease-in;
   width:  100%;
   height: 100%;
}
.minimized{
   width: 200px !important;
   height: 30px !important;
}

If anyone has do that for some reason, simply leave the from {} part and only specify the to {}

@keyframes addright{
    /* from{width:0;} */
    to {width: var(--small-width);}
}

Take a look at the Web Animations API. You can use it to directly manipulate the browser's CSS animation engine and directly call CSS animations on elements with JavaScript. Just like CSS animations, you specify a set of keyframes for the animation engine to interpolate.

The benefit is, as it is JavaScript, you can get the current CSS (property: value) pair/s from the element you want to animate and pass them into the first keyframe. That way your animation would always take the elements current CSS styling as the starting point for your animation.