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

Question

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

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

@-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 而不是animation。

过渡允许您设置所需的结果，然后从元素的当前状态自动推断出关键帧。

例如在下面 - 将 .minimized 类应用于 .window 将减少其大小，仅指定端点。

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