1

我有两个动画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's 规则（供应商前缀相当多）并给副本一个新名称。

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

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

4

1 回答 1

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

然后使用animation: squishstretchbounce 1.4s infinite;. 我编译的关键帧比你的多的原因是它可以动画回其默认状态。确保也添加浏览器前缀。在旁注中，我相信无前缀keyframes需要是@keyframes

于 2013-10-18T13:43:56.397 回答