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

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

迄今为止我的代码（效果相关代码）：

---

如果只关心相对于元素的当前状态设置结束状态，则需要的是

转换

而不是

动画

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

e、 g.在下面-将

.minimized

类应用于

.window

将减少其大小，只指定端点

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

---

最简单的方法是，若你们已经添加了边距或页眉，那个么就把它删除并使用它 “转换”。它将根据它的起始位置设置动画。 例：

---

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

---

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

如果有人出于某种原因这样做，只需保留

from{}

部分，只指定

to{}

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

---

不可能使用关键帧。需要Js/JQ解决方案。好的，它可以工作。非常感谢。因此，如果我正确理解了关键帧和动画，我需要知道属性的初始状态和最终状态，并且或多或少还有其他需要转换的内容。

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

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