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

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

e.g。在下面 - 将.minimized类应用于.window将仅使用指定的端点来减小其大小。

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

Answer 2

如果有人出于某种原因这样做，只需留下 from {} 部分并只指定 to {}

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

Answer 3

最简单的方法是，如果您增加了边距或顶部将其删除并使用 '转变'。它将根据其开始位置为其设置动画。例如：

@keyframes move_right  
0% {
    transform: translatex(16px);
}
100% {
    transform: translatex(160px);
}

Answer 4

看一下Web Animations API。您可以使用它直接操纵浏览器的CSS动画引擎，并使用JavaScript直接在元素上调用CSS动画。与CSS动画一样，您可以指定一组关键帧供动画引擎进行插值。

好处是，因为它是JavaScript，所以您可以从要设置动画的元素中获取当前CSS（属性：值）对，并将它们传递到第一个关键帧中。这样，您的动画将始终以当前CSS样式的元素作为动画的起点。

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

4 个答案: