如何使@keyframes从当前属性值开始？

Question

我试图通过css中的关键帧和动画将最小化/最大化效果应用于div.虽然简单的,非动画的效果本身很简单(我已经添加了它),但对于关键帧的起点(来自{...})的需求让我很生气!我已经尝试过使用空的属性,使用虚拟的非相关属性(如不透明度:1,不需要不透明度)或使用所需属性的自动值,但到目前为止我没有运气.所以我的问题是,有没有办法设置一个关键帧,所以它从div的当前属性值开始？更具体地说,我可以将div的宽度和高度从它的CURRENT,generic,width和height开始扩展到给定的大小吗？

到目前为止我的代码(效果相关代码):

@-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

如果您只是担心相对于元素的当前状态设置结束状态,那么您需要的transition不是a animation.

转换允许您设置所需的结果,然后从元素的当前状态自动推断关键帧.

例如,在下面 - 应用.minimized类.window将仅使用指定的端点来减小其大小.

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