Css 在两个不同的时间对同一动画进行排队，而不重复代码并给出新名称？

我有两个动画

bounce

和

squishstretch

我想先做

squishstretch

动画，然后

bounce

，然后再做

squishstretch

这不起作用：

animation-name: squishstretch, bounce, squishstretch;
animation-duration: .15s, .2s, .12s;
animation-delay: 0, .25s, .55s;
animation-iteration-count: 2, 2, 2;

但这是真的

animation-name: squishstretch, bounce, squishstretch2;
animation-duration: .15s, .2s, .12s;
animation-delay: 0, .25s, .55s;
animation-iteration-count: 2, 2, 2;

但这意味着我必须复制出所有的

squishstretch

规则（供应商在前面加了不少前缀），并给副本起一个新名称

有没有一种方法可以修复它，而不必复制大量规则，以便动画名称可以具有唯一的名称

演示：

制作一个动画

@keyframes squishstretchbounce {
0%   { height: 100px; width: 100px; margin-left: 0; bottom:0; }
44%  { height: 94px; width: 104px; margin-left: -2px; bottom: -6px;}
    88%  { height: 100px; width: 100px; margin-left: 0; bottom:0; }
    89%  { bottom: 0; }
    95%  { bottom: 10px; }
    100% { bottom: 0; }
} 

然后使用

动画：squishstretchbounce 1.4s无限。我编译的关键帧比你编译的关键帧多的原因是为了使其动画恢复到默认状态。还要确保添加浏览器前缀。另一方面，我认为未固定的
关键帧
需要是
@关键帧
制作一个动画

@keyframes squishstretchbounce {
0%   { height: 100px; width: 100px; margin-left: 0; bottom:0; }
44%  { height: 94px; width: 104px; margin-left: -2px; bottom: -6px;}
    88%  { height: 100px; width: 100px; margin-left: 0; bottom:0; }
    89%  { bottom: 0; }
    95%  { bottom: 10px; }
    100% { bottom: 0; }
} 

然后使用
动画：squishstretchbounce 1.4s无限。我编译的关键帧比你编译的关键帧多的原因是为了使其动画恢复到默认状态。还要确保添加浏览器前缀。另一方面，我认为未固定的
关键帧
需要是
@关键帧