总结了两个CSS关键帧

Question

我有两个css-keyframes。他们只通过一个陈述来区分：

@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%;
}

}

expand-t中的 50％我将top更改为 0 ，而我更改了top expand-b到 50％。其余的代码是相似的 如何总结这一点以避免冗余和代码？

PS：我不会使用LESS或SCSS或者其他任何东西。如果可能的话，只有CSS的方式！

Answer 1

如果没有某种预处理器，则无法汇总关键帧。

来自Mozilla Developer Network：

  

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