css - 总结两个CSS-keyframes

Question

我有两个 CSS 关键帧。它们仅通过一种说法进行区分：

@keyframes expand-t{
0%{
    width: 50%;
    height: 50%;
    z-index: 100;
}
50%{
    height: 50%;
    z-index: 100;

    top: 0;
    left: 0;
    width: 100%;
}
100%{
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;

    height: 100%;
}

}
@keyframes expand-b{

0%{
    width: 50%;
    height: 50%;
    z-index: 100;
}
50%{
    height: 50%;
    z-index: 100;

    top: 50%;
    left: 0;
    width: 100%;
}
100%{
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;

    height: 100%;
}

}

在50%时，expand-t我将 in 更改top为0，而将topin更改expand-b为50%。其余代码类似。
我如何总结这一点以避免冗余代码？

PS：我不会使用 LESS 或 SCSS 或其他任何东西。尽可能采用纯 CSS 方式！

Answer 1

如果没有某种预处理器，您将无法总结关键帧。

来自Mozilla 开发者网络：

如果给定名称存在多个关键帧集，则使用遇到的最后一个。@keyframes 规则不会级联，因此动画永远不会从多个规则集中驱动关键帧。