htmlcsswebgraphicscss-animations

How to make @keyframes start from current property value?


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

Solution

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