How to make @keyframes start from current property value?

Question

i'm trying to apply a minimize/maximize effect to a div through keyframes and animations in css. While the plain, non-animated, effect is by itself pretty simple (i've already added it), the need for a starting point (from{...}) for keyframes is driving me mad! I've already tried with an empty from property, whitout it and with a dummy, non-related attribute (like opacity: 1, where opacity is not needed) or with auto values for needed properties, but so far i had no luck. So my question is, is there a way to set a keyframes so it starts from div's current properties values? To be more specific, can i have a div's width and height expanded to a given size starting from it's CURRENT, generic, width and height?

My code so far (effect related code):

@-webkit-keyframes maxWin{
    from 
    {
        /* width: auto; or width: ; or nothing at all   */
        /* height: auto; or height: ; or nothing at all */
        /* left: auto; or left: ; or nothing at all     */
        /* top: auto; or top: ; ...you know.            */
    }
    to
    {
        width:  100% !important;
        height: 100% !important;
        left: 0px !important;
        top: 0px !important;
    }
}
@-webkit-keyframes minWin
{
    from
    {
        /*width: auto; or width: ;*/
        /*height: auto; or height: ;*/
    }
    to
    {
        width: 200px !important;
        height: 30px !important;
    }
}


....

.maximized
{
    /*width:  100% !important;
    height: 100% !important;
    left:   0px  !important;
    top:    0px  !important;*/ Plain maximize effect. Works.

    -webkit-animation: maxWin 1s normal forwards !important;
    animation: maxWin 1s normal forwards !important;
}
.minimized
{
    /*width:  200px !important;
      height: 30px  !important;*/ Plain minimize effect. Also works.

    -webkit-animation: minWin 1s normal forwards !important;
    animation: minWin 1s normal forwards !important;
}

Answer 1

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);}
}

Answer 2

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;
}

Answer 3

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.