css - 在两个不同的时间排队相同的动画，而不复制代码和提供新名称？

Question

我有两个动画 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 的规则(加上供应商前缀相当多)并给副本一个新名称。

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

演示:http://jsbin.com/ekebun/1/edit

Answer 1

让它成为一个动画!

@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 infinite;。我编译的关键帧比你多的原因是它可以动画回到默认状态。确保也添加浏览器前缀。附带一提，我相信没有前缀的 keyframes 需要是 @keyframes